IMPORTANT: Please read this document closely. Many resources are linked within it. Before starting on your project, assemble a list of the tasks you think you need to do and discuss how you will tackle these together. The front-end will need to make some basic wireframes.
This application is a question and answer platform, similar to Stack Overflow. It does not have to be themed to code-related questions, though. Theming and design is up to you.
You may not be able to do ALL of the listed requirements. That is OK. Decide what the core functionality is and what you can wait to implement once you have the basics done.
Backend devs will build an API using Django and Django REST Framework that allows users to create questions and answers to questions. Question-askers can mark an answer as accepted. Logged-in users can "star" or favorite a question or answer. Your application only needs to serve JSON, not HTML.
You will need to make a list of your endpoints available to the front-end devs on your team.
- Allow an authenticated user to create a question (allowing for long-form text).
- Allow an authenticated user to create an answer to a question (one question can have many answers).
- Allow unauthenticated users to view all questions.
- Allow unauthenticated users to view a single question with all its answers.
- Have registration and token-based authentication for logging in and logging out.
- Allow a user to get a list of all the questions they have posted.
- Allow a user to get a list of all the answers they have posted.
- Allow the original author (ONLY the original author) of the question to mark an answer as accepted.
- Questions cannot be edited once they have been asked (note: allowing editing of unanswered questions is listed as an extra challenge).
- A question can be deleted by its author, whether answered or unanswered. If it is deleted, all associated answers should also be deleted.
- Users can search the database by supplying a search term. This should use Django's PostgreSQL full-text search.
- At minimum allow a search in the text of a question.
- A more comprehensive search would allow searching both questions and answers.
- Deployed to Render
- Authenticated users can "star" or favorite questions or answers they like. They should also be able to un-star anything that they have starred.
- Add tags to questions and allow search by tags
- Allow a user to upload a profile photo.
- for deployment, you'll need to configure a storage backend like Amazon S3 in order to upload files.
- Allow an unanswered question to be edited.
- Allow the author of an answer to delete or edit an answer.
- Allow users to upvote or downvote answers.
You should use djoser and token-based authentication to handle registration and login. You will also likely want to paginate your results.
CORS (Cross-Origin Resource Sharing) headers must be added to your responses for the front-end app to interact with your API. Read this blog post to find out how to set up CORS. You will want to use django-cors-headers (mentioned in the blog post) and set CORS_ALLOW_ALL_ORIGINS = True.
The front-end team will build a React application that will send requests to the QuestionBox API.
This application is a question and answer platform, similar to Stack Overflow in format, but you can theme it and design it however you like. This application should allow logged-in users to ask questions, give and receive answers, and mark an answer as accepted.
Users that are not logged in should still be able to view questions and answers, but cannot ask questions, give answers, or mark answers as accepted.
Your application should be polished. It should gracefully handle loading, error, and empty (e.g., no results for a search) states. Forms should include validation. It must be deployed.
- Users can create an account (i.e., register).
- Users can log in and log out.
- Unauthenticated users can see all questions.
- Unauthenticated users can see the answers for a single question.
- Authenticated users can ask (post) a question.
- A question cannot be edited.
- A user can delete their own question.
- Authenticated users can post an answer a question.
- Authenticated users can mark an answer to their own question as "accepted". This should be indicated in the UI somehow.
- Authenticated users have a profile page that lists all of their own questions and answers.
- The application implements client-side routing.
- The application is styled using a CSS library/framework.
- The application is deployed to Netlify and runs in production without errors.
Front-end routes are independent of back-end URLS. You can design the routes that make sense for your front-end application.
- Login and registration should each have a URL, or one for both if they are on the same page.
- The list of questions should have its own route.
- Consider having a route for one question where you display that question and all its answers.
- User profiles should have their own route.
- If implementing pagination, you will likely use routes to implement this.
Most of these are dependent on whether the API supports these capabilities.
- Authenticated users can "star" a question or answer they like.
- Allow a user to "unstar" something they have previously starred.
- Allow users to search questions using a search term.
- If your API supports tags, allow search by tags.
- Add pagination to your lists of questions, so that you only show a certain number of questions at a time and users can page through them.
- Allow questions to be edited if they have not been answered.
- Allow users to show only the questions and/or answers they have starred.
- Allow users to upvote/downvote answers.
- Allow users to follow/unfollow each other.
- Allow users to upload a profile photo.
During development of the front-end, you will want to be able to make requests before the API is complete. You can handle this in a few ways.
One way is to make functions or methods for all your API calls, but instead of having them actually make the calls at first, have them set the data you are expecting without actually making an API call. Another way is to use the provided exported mock API specification for Mockoon, a tool that will run a mock server for you. You will need to download Mockoon and open the file provided in this repo (in Mockoon, select "Open environment" from the File menu). Here is documentation on getting started with Mockoon. Here is documentation on making API calls from your React app to Mockoon.
If you use Mockoon, you may want to be able to switch which server you use based on the environment your code is running in. To learn about how to access your data based on environment, read this article on create-react-app-environments.
You can read more about approaches to building your front-end before the API is done in this dev.to article.
You can work with your backend dev(s) to get the back-end API running on your local machine, but you do not have to.
A gotcha for CORS on the front end is a missing trailing slash in your request URL. If CORS headers are set correctly on the backend but you are still getting a CORS error on the front end and it mentions a redirect, try adding a forward slash (/) to the end of the URL for the request that is failing.