Skip to content

ardalanmemar93/plug-in

Repository files navigation

Screenshot 2023-11-13 at 12 34 09 AM

Built By:

Ardalan Memar

Shane Stanley

Bryant Gilgan

Maintenance

HTML badge CSS badge JS badge GitHub Visual Studio Code Heroku badge ChatGPT Stack Overflow Trello Google Chrome MDN Web Docs Django Python Slack Amazon

Click the following link to be redirected to the live version of the code!

DESCRIPTION:

Welcome to Plug-In: A Dynamic Coding Hub

Plug-In is more than just a platform; it's a dynamic hub crafted for coding enthusiasts who are passionate about sharing, learning, and collaborating. At the core of this vibrant community is a web application developed using cutting-edge technologies, providing a seamless experience for users to explore, ask questions, and engage in meaningful discussions.

🔗 Associated Links:

Click the following link to be redirected to the Wireframe and Design Inspiration for this project!

Whimsical

Click the following link to be redirected to the Trello Board to see the user stories implemented in this app!

Trello

Click the following link to be redirected to the ERD Diagram to see the behind the scenes of data entities targeted!

Lucid

Click the following link to be redirected to the Pitch Deck to see the overview of our project!

Google Slides

💾 ABOUT PAGE

🐇 HOME PAGE

Screenshot 2023-11-12 at 8 59 31 PM

💃🏼 PROFILE

Screenshot 2023-11-12 at 9 01 05 PM

🔌 LOG IN

Screenshot 2023-11-12 at 9 03 55 PM

☎️ CREATE A QUESTION

Screenshot 2023-11-12 at 9 10 28 PM

🥩 DETAILS

Screenshot 2023-11-12 at 9 34 01 PM

💻 Technologies Used:

Screenshot 2023-11-12 at 9 39 46 PM

Technologies Behind Plug-In:

Django and Python:

Framework and Backend: Plug-In leverages the power of Django, a high-level Python web framework. This robust combination ensures a scalable, secure, and efficient backend infrastructure for handling user interactions.

JavaScript, HTML, CSS:

Frontend Excellence: The frontend is meticulously crafted using a trio of technologies — JavaScript for dynamic behavior, HTML for structuring content, and CSS for styling. This results in an intuitive and user-friendly interface that enhances the overall user experience.

Tailwind CSS:

Modern Styling: Tailwind CSS is employed to streamline the styling process. Its utility-first approach allows for rapid development and easy maintenance, ensuring a consistent and visually appealing design across the entire application.

Heroku and Amazon AWS:

Scalability and Storage: The application is hosted on Heroku, providing scalability and reliability to accommodate a growing user base. Amazon AWS comes into play for efficient image uploading, ensuring a smooth experience for users sharing visual content.

Neon (Database):

Efficient Data Management: Neon is the database solution chosen for Plug-In. Its efficiency and reliability contribute to seamless data management, ensuring that user interactions, questions, and comments are handled with precision.

Continuous Improvement and Future Updates:

Plug-In is a project in constant evolution. Continuous improvements and updates are a fundamental aspect of our commitment. Future releases will introduce exciting features, enhance the user experience, and expand the application's capabilities. This commitment to growth ensures that Plug-In remains at the forefront of providing a space where coding enthusiasts can thrive.

Join the Plug-In Community:

Whether you're a seasoned developer or a coding enthusiast exploring the world of programming, Plug-In invites you to connect, learn, and contribute. Stay tuned for upcoming developments, opportunities, and a thriving community that shares your passion for coding. Plug-In is not just a platform; it's a community-driven space where knowledge is shared, questions are answered, and a shared enthusiasm for coding binds us together. Welcome to Plug-In, your dynamic coding hub!

Favourite Function

Decorator @login_required:

This decorator ensures that only authenticated users can access the view. If a user is not authenticated, they will be redirected to the login page.

Function Parameters:

request: Represents the HTTP request sent by the user. question_id: The unique identifier of the question to be displayed.

Querying the Question and Comments:

get_object_or_404(Question, pk=question_id): Retrieves the question with the specified question_id from the database. If the question does not exist, a 404 page is displayed. Comment.objects.filter(question=question): Retrieves all comments associated with the selected question.

Handling Form Submission (POST request):

If the request method is POST, the function processes the comment form. It checks if the form is valid and distinguishes between adding a new comment and editing an existing comment based on the presence of 'comment_id' in the POST data. If editing, it retrieves the existing comment, checks if the current user is the author, updates the content, and saves the changes. If adding a new comment, it creates a new comment object, associates it with the current user and question, and saves it to the database.

Rendering the Template:

If the request method is not POST, or after processing the form, the function renders the 'questions/question_detail.html' template. It passes the question, associated comments, and the comment form to the template.

Template Rendering:

The template uses the provided data to display the details of the question, the existing comments, and the form for adding new comments.

Redirect After Form Submission:

After successfully processing the form, the function redirects the user back to the question detail page.

@login_required
def question_detail(request, question_id):
    question = get_object_or_404(Question, pk=question_id)
    comments = Comment.objects.filter(question=question)
    
    if request.method == 'POST':
        comment_form = CommentForm(request.POST)
        if comment_form.is_valid():
            if 'comment_id' in request.POST:  # Check if 'comment_id' is in the POST data
                # This means it's an edit
                comment_id = request.POST['comment_id']
                existing_comment = get_object_or_404(Comment, pk=comment_id)
                if existing_comment.author == request.user:
                    # Check if the user is the author of the existing comment
                    existing_comment.content = comment_form.cleaned_data['content']
                    existing_comment.save()
            else:
                new_comment = comment_form.save(commit=False)
                new_comment.author = request.user
                new_comment.question = question
                new_comment.save()
            return redirect('question_detail', question_id=question.id)
    else:
        comment_form = CommentForm()

    return render(request, 'questions/question_detail.html', {
        'question': question,
        'comments': comments,
        'comment_form': comment_form
    })

Challenges

Team Collaboration:

Coordinating efforts within a team to ensure smooth collaboration required effective communication and version control. Integrating individual contributions seamlessly and resolving conflicts were essential aspects of the development process.

User Authentication and Authorization:

Implementing secure user authentication and authorization mechanisms was crucial to protect user data and ensure that only authorized users could access specific features of the application.

Data Management with Django ORM:

Managing and organizing data using Django's Object-Relational Mapping (ORM) posed challenges related to database schema design, data migrations, and ensuring data consistency throughout the development lifecycle.

Front-End Integration with Django Templates:

Integrating dynamic content and data from the back end into responsive and visually appealing front-end components using Django templates required careful attention to detail and consideration of user experience.

Deployment and Hosting on Heroku and AWS:

Deploying the application on platforms like Heroku and utilizing Amazon AWS for image uploading introduced challenges related to configuration, scalability, and ensuring the reliability of the hosting infrastructure.

Integration of JavaScript and Tailwind CSS:

Incorporating JavaScript for interactive features and utilizing Tailwind CSS for styling necessitated overcoming challenges related to seamless integration, optimizing performance, and maintaining a consistent and aesthetically pleasing design.

Continuous Improvement and User Feedback:

Establishing a framework for continuous improvement based on user feedback was essential. Balancing feature enhancements with user experience improvements required an iterative approach to development.

Testing and Quality Assurance:

Implementing robust testing procedures and ensuring code quality were ongoing challenges. Balancing the need for thorough testing with the pace of development and feature additions required careful planning.

Future

  • Mobile support
  • Integrate an API.
  • Adding the user detailes in the comments
  • Expand on the app and add a chatting hub
  • User can favourite comments
  • Expand on the overall design
  • Refactor code

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •