Code Buddy is a website created to allow developers to ask questions and receive relevant answers from other developers.
The main objective of the site is to allow developers to share knowledge and ideas, collaborate and help each other to find solutions to the problems they face. This is achieved by providing a platform of questions and answers, where users can search for the information they are looking for. Developers are also able to upvote or downvote the questions and answers in order to assure that relevant content gets highlighted.
Visit the deployed website here.
- User Experience (UX)
- Features
- Technologies Used
- Testing
- Deployment
- Finished Product
- Credits
- Known Bugs
- Acknowledgements
-
The website contains simple colors for a modern design and also to not draw attention from the content.
-
Responsive design to make the website accessible on different screen sizes.
-
Structure is easy to understand and navigates effortlessly.
-
Site users are able to register an account in order to interact with the content.
-
Site users are able to upvote or downvote the questions and answers to help identify relevant content.
-
As a Site Admin, I want to manage the site content.
-
As a Site User, I want to be able to interact with the content.
-
As a Site User, I want the information to be easy to find and read.
-
As a Site User, I can create new questions and answers.
-
As a Site User, I want to manage the content I created.
-
As a Site User, I want to be able to help make the content more relevant.
| Opportunity / Problem | Importance | Viability / Feasibility |
|---|---|---|
| Responsive design | 5 | 5 |
| Account registration | 5 | 5 |
| Ability to add profile picture | 3 | 2 |
| Social media signup | 3 | 2 |
| Create, edit and delete questions | 5 | 4 |
| Create, edit and delete replies | 5 | 4 |
| Ability to search for questions | 4 | 3 |
| Add tags to the questions | 3 | 1 |
| Upvote / downvote question and replies | 4 | 3 |
| Total | 37 | 29 |
According to the strategy table, not all features can be implemented in the first release of the project. For this reason, the project will be divided in multiple phases. The first phase will include the features that have been identified in order to build the minimum viable product.
First Phase
-
Responsive design
-
Account registration
-
Create, edit and delete questions
-
Create, edit and delete replies
-
Ability to search for questions
-
Upvote / downvote question and replies
Second Phase
-
Ability to add profile picture
-
Social media signup
-
Add tags to the questions
GitHub projects was used as my project management tool to track user stories. Using a Kanban board helped to focus on specific tasks and track the project progress.
Start
Week 1
Week 2
Week 3
The website has been organized in a Hierarchical Tree Structure to ensure the site user navigates through the site effortlessly and intuitively. Here you can you can find the website map design.
-
Header, footer and navigation bar are consistent through all pages.
-
Links and forms provide clear feedback to the site user.
-
The opportunity to add additional content to the website is provided for the site user once they register an account.
-
A 404-error page is available.
The database model has been designed using drawsql. The type of database being used for the is relational database being managed using PostgreSQL.
Question Model
-
Title: Unique question title provided by the author.
-
Author: Store the author of the question as a User foreign key.
-
Content: Question details provided by the author.
-
Slug: Store a unique slug to identify the question by.
-
Created On: Date and time set automatically at the question's creation.
-
Last updated: Date and time set automatically every time the question is updated.
-
Votes score: Calculated score of the question's votes.
Reply Model
-
Question: A foreign key from the Question model, storing the question being replied.
-
Author: Store the author of the reply as a User foreign key.
-
Body: Reply body with details provided by the author.
-
Created On: Date and time set automatically at the reply's creation.
-
Last updated: Date and time set automatically every time the reply is updated.
-
Votes score: Calculated score of the reply's votes.
QuestionVote Model
-
Voter: Foreign key from the User model, storing the user voting the question.
-
Score: Score provided by the voter. The options are upvote with a value of 1 or downvote with a value of -1.
-
Question: A foreign key from the Question model, storing the question being voted.
ReplyVote Model
-
Voter: Foreign key from the User model, storing the user voting the reply.
-
Score: Score provided by the voter. The options are upvote with a value of 1 or downvote with a value of -1.
-
Reply: A foreign key from the Reply model, storing the question being voted.
Balsamiq has been used to showcase the appearance of the site and display the placement of the different elements whitin the pages.
| Page | Desktop Version | Mobile Version |
|---|---|---|
| Index / User Logged Out |  |
 |
| Sign Up |  |
 |
| Log In |  |
 |
| Index / User Logged In |  |
 |
| Ask Question |  |
 |
| Open Question |  |
 |
| Leave Reply |  |
 |
The colors used in the website are a teal blue color (#3F778D) for secondary buttons, navbar links, as well as for main buttons and links transitions. Charcoal (#253A47) is used for the main text, footer background, main buttons and secondary buttons and links transitions.
A platinum (#E9EDE9) for the navigation bar and card footers background, footer and buttons content. A baby powder color (#FFFFFD) is also used in the main background and cards footer as well as for input fields.
The colors are were chosen keeping in mind simplicity but also providing the website a modern design. This in order to keep the focus on the content but also appealing for the users.
The main font being used in the site is Nunito, with sans-serif as a fallback in case Nunito doesn't get imported correctly. Roboto, with sans-serif as a fallback is used mainly for headings and the logo has been given the Quicksand font, with sans-serif as a fallback.
Nunito and Roboto were chosen after some research on fonts that are better for reading. Specially Nunito which has been used as main font. Quicksand was used for the logo for design purposes.
-
The website has been designed from a mobile first perspective.
-
Responsive design across all device sizes.
-
Navigation Bar
-
Contains the main logo and section links.
-
The navigation bar contains links to all sections to facilitate navigation across the site. It also has a hover effect that changes color to provide feedback to the Site User for a better user experience.
-
-
Search bar
- Provide the Site User an input field and a Search button to be able to search for specific questions.
-
Footer
- The footer includes a logo and link to social media channels.
-
Question list
-
Display a paginated list of all the question and its relevant information for the user to identify.
-
Provide the Site User with a link to the detailed question.
-
Question score as well as voting possibilities for registered users is provided next to the question.
-
For registered users, a Ask Question button is provided to allow the user to access the Ask Question Page to create new questions.
-
Edit and Question buttons are provided for the questions the registered Site User has created.
-
- Provide relevant information about the website's objective.
-
Display information about the Search being handled
-
Display a paginated list of the questions matching the search and its relevant information for the user to identify.
-
Display the full question a well as a list of its replies.
-
Question and reply scores as well as voting possibilities for registered users is provided next to each item.
-
For registered users, a Leave Reply button is provided to allow the user to access the Leave Reply page to create a new reply to the question.
-
Edit and Question buttons are provided for the questions and replies the registered Site User has created.
- Provide a form to allow registered Site Users to create a new question.
- Provide a form to allow registered Site Users to create a new reply to the questions.
- Provide a prepopulated form to allow the Site User to edit a question they created.
- Provide a form to allow the Site User to delete a question they created.
- Provide a prepopulated form to allow the Site User to edit a reply they created.
- Provide a form to allow the Site User to delete a reply they created.
| Page | Purpose | Image |
|---|---|---|
| Register | Allow the Site User to sign up an account for the website. |  |
| Login | Allow the Site User to sign in with their account. |  |
| Logout | Allow the Site User to sign out from their account. |  |
-
- Django was used as web framework.
-
- Django Template was used as a templating language for Django to display backend data to HTML.
-
- Bootstrap 5 was used throughout the website to help with styling and responsiveness.
-
- Google fonts was used to import the fonts into the html file, and were used on all parts of the site.
-
- Font Awesome was used throughout the website to add icons for aesthetic and UX purposes.
-
- jQuery was used as a JavaScript library to help writing less JavaScript code.
-
- Django Allauth was used for user authentication, registration, and account management.
-
- Django Crispy Form was used to control the rendering of the forms.
-
- Gunicorn was used as Python WSGI HTTP Server for UNIX to support the deployment of Django application.
-
- Summernote has been used as WYSIWYG editor.
-
- Cloudinary has been used as image management solution
- Heroku Postgres
- Heroku Postgres database was used in production, as a service based on PostgreSQL provided by Heroku.
-
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
-
- GitPod was used for writing code, committing, and then pushing to GitHub.
-
GitHub
GitHub was used to store the projects code after being pushed from Git. -
- Heroku was used to deploy the website.
-
- Am I Responsive was used to preview the website across a variety of popular devices.
-
- Tiny PNG was used to reduce the file size of the images.
-
- Coolors was used to create a color scheme for the website.
-
- Balsamiq was used to create the wireframes during the design phase of the project
-
- Chrome DevTools was used during development process for code review and to test responsiveness.
-
- W3C Markup Validator was used to validate the HTML code.
-
- W3C CSS Validator was used to validate the CSS code.
-
- The JSHints JavaScript Code Quality Tool was used to validate the site's JavaScript code.
-
- Favicon.cc was used to create the site favicon.
The testing documentation can be found here.
This project was developed using a GitPod workspace. The code was commited to Git and pushed to GitHub using the terminal.
To deploy this page to Heroku from its GitHub repository, the following steps were taken:
-
Create the Heroku App:
- Select "Create new app" in Heroku.
- Choose a name for your app and select the location.
-
Attach the Postgres database:
- In the Resources tab, under add-ons, type in Postgres and select the Heroku Postgres option.
-
Prepare the environment and settings.py file:
- In the Settings tab, click on Reveal Config Vars and copy the url next to DATABASE_URL.
- In your GitPod workspace, create an env.py file in the main directory.
- Add the DATABASE_URL value and your chosen SECRET_KEY value to the env.py file.
- Add the SECRET_KEY value to the Config Vars in Heroku.
- Update the settings.py file to import the env file and add the SECRETKEY and DATABASE_URL file paths.
- Update the Config Vars with the Cloudinary url, adding into the settings.py file also.
- In settings.py add the following sections:
- Cloudinary to the INSTALLED_APPS list
- STATICFILE_STORAGE
- STATICFILES_DIRS
- STATIC_ROOT
- MEDIA_URL
- DEFAULT_FILE_STORAGE
- TEMPLATES_DIR
- Update DIRS in TEMPLATES with TEMPLATES_DIR
- Update ALLOWED_HOSTS with ['app_name.heroku.com', 'localhost']
-
Store Static and Media files in Cloudinary and Deploy to Heroku:
- Create three directories in the main directory; media, storage and templates.
- Create a file named "Procfile" in the main directory and add the following:
- web: gunicorn project-name.wsgi
- Go to Deploy tab on Heroku and connect to the GitHub, then to the required recpository. Click on Delpoy Branch and wait for the build to load. When the build is complete, the app can be opened through Heroku.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- At the top of the repository, on the right side of the page, select "Fork"
- You should now have a copy of the original repository in your GitHub account.
How to run this project locally:
- Install the GitPod Browser Extension for Chrome.
- After installation, restart the browser.
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- Click the green "GitPod" button in the top right corner of the repository. This will trigger a new gitPod workspace to be created from the code in github where you can work locally.
How to run this project within a local IDE, such as VSCode:
- Log into GitHub or create an account.
- Locate the GitHub Repository.
- Under the repository name, click "Clone or download".
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local IDE open the terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type 'git clone', and then paste the URL you copied in Step 3.
git clone https://github.com/josswe26/code-buddy
- Press Enter. Your local clone will be created.
Further reading and troubleshooting on cloning a repository from GitHub here
| Page | Desktop | Mobile |
|---|---|---|
| Home |  |
 |
| About |  |
 |
| Search Results |  |
 |
| Question Detail |  |
 |
| Ask Question |  |
 |
| Leave Reply |  |
 |
| Edit Question |  |
 |
| Delete Question |  |
 |
| Edit Reply |  |
 |
| Delete Reply |  |
 |
| Sign Up |  |
 |
| Sign In |  |
 |
| Sign Out |  |
 |
| 404 Error |  |
 |
- Website content was written by the developer.
- Example questions and replies were taken from Stack Overflow-
-
- About Page image: Taken by Buro Millennial.
-
- 404 Error Page image: Taken by Tai Bui.
-
Stack Overflow and W3Schools were consulted on a regular basis for inspiration and sometimes to be able to better understand the code being implement.
-
Message implementation an dismissal code is taken from Code Institute's django-blog project.
-
Upvote/downvote button selection stay the same for all users. This do to an error in the logic. Even though the developer has an idea on how to solve the issue. The solution is yet to be implemented due lack of time.
-
The same applies for pagination is Search Results page which is currently not working.
-
A known issue with Summernote field validation is present in the project. An invalid form will be posted if the field is empty. A message will however be displayed, informing the user that there has been a problem with the submission.
-
My partner, for her unconditional love, help and continued support in all aspects of life, specially when I did not have time for anything else than to work with this project. You made it possible!
-
My friend, Miguel, for being always there to help, no matter what time of the day.
-
My tutor, Marcel, for his invaluable support, feedback and guidance through the whole process.
-
Code Institute and its amazing Slack community for their support and providing me with the necessary knowledge to complete this project.