| RESTful API | • Design reasonable schemas and ERD (Entity Relationship Diagram) • Design and implement a RESTful API with appropriately named routes • Responses from the server must have a uniform structure • Implement soft delete with isDeleted for user data. • Validate all request inputs.
| Authentication | • Implement user authentication using JSON Web Tokens (JWTs) or another secure authentication method, such as OAuth • Password must be encrypted.
| Documentation | • Include a README file with: ? Instructions on how to set up and run the API locally ? API documentation on how to consume the API (ex: description and instruction for each route) ? ERD
| User Interface | • The application must have a responsive design that looks good on least 3 screen sizes: desktop, tablet, and mobile. • Theme changing feature (eg: Dark/Light mode). • Use Material UI. Customizing the MUI components with CSS is allowed.
| --- | --- | | User Authentication | • Implement persistent login.
| Form Validation | • The project should implement client-side form validation to ensure that user input is valid before submitting it to the server.
| Error Handling | • Implement error handling on the front-end to display error messages to users when something goes wrong on the server.
| Routing | • Use React Router to handle client-side routing and allow users to navigate between pages without a full page refresh. • Each view must have its dedicated url path so that it is possible to share the current view by url between users. (Only required for non-protected routes). • Protected routes for pages where applicable. • The deployed version on Netlify must be able to navigate to pages by editing the url input box on the browser or hitting refresh button instead of showing 404 error. Hint: https://docs.netlify.com/routing/redirects/
| Documentation | • Include a README file with: ? Project description - a brief description of the purpose and main features ? User Story ? Instructions on how to set up and run the application locally ? Third-party libraries used in the project
You are expected to submit a minimum of the following
| Item | Notes |
|---|---|
| Github link to Front-end code base | Include README as instructed in FE requirements |
| Github Link Back-end code base | Include README as instructed in BE requirements |
| Links to deployed application & server | Netlify & Heroku (or other platforms as appropriate) |
Have a look at the Product Gallery below, choose one that speaks to you and follow the instruction on the product page
Final Project: Product Gallery
Our company is developing a social platform app for users to connect and share content with each other. The app will include a range of features and functional requirements to allow users to create and manage their profiles, search for and follow other users, and post and interact with content.
| User Roles | Stories for each user role |
|---|---|
| User | 1. As a user, I want to be able to sign up to create my profile |
- As a user, I want to be able to log in (log out) of my account
- As a user, I want to be able to manage my profile by adding personal information, profile picture, and interests.
- As a user, I want to be able to search for and follow/unfollow other users
- As a user, I want to be able to accept/deny following requests from other users.
- As a user, I want to be able to see a list of people that I follow as well as my followers
- As a user, I want to be able to share my thoughts and interests by creating content
- As a user, I want to be able to view my own posts as well as other users’ content
- As a user, I want to be able to interact with content by liking, reacting, commenting, and sharing.
- As a user, I want to be able to edit or delete content, comments, shares or likes that I created.
- As a user, I want to be able to receive notifications about new likes, shares, and comments on my content, as well as new followers and other relevant events.
- As a user, I want to be able to save the content so that I can access them later.
| Feature | Specification |
|---|---|
| User Authentication | - Users can sign up for an account by providing basic information (name, email, password) |
-
Users can log in and log out of their accounts.
-
Passwords must be at least 8 characters long and include at least one uppercase letter, one lowercase letter, and one number.
-
Use encryption to securely store user passwords and other sensitive information.
| User Profile Management |
-
Users can edit their profile information (name, profile picture, bio, interests) at any time.
-
Users can view their own profile as well as the profiles of other users.
-
Users can follow/unfollow other users
-
Users can accept/deny following requests.
-
Users can view a list of people they follow as well as their followers.
| Post Creation and Interaction |
-
Users can create posts that consist of text, images, or video.
-
Users can view their own posts as well as other users' posts.
-
Users can like, react, comment, and share posts.
-
Users can edit or delete posts, comments, shares, or likes that they created.
| Notification System |
-
Users receive notifications for new likes, shares, and comments on their posts, as well as new followers.
-
Users can view their notification history.
| Post Bookmarking |
-
Users can save posts to a bookmarks list for later viewing.
-
Users can remove posts from their bookmarks list.
- Users: This schema includes user information such as name, email, password, profile picture, and interests.
- Posts: This schema includes post information such as post content, creation date, and the user who created the post.
- Comments: This schema includes comment information such as comment content, creation date, and the user who created the comment.
- Likes: This schema includes like information such as creation date, the user who created the like, and the post that was liked.
- Shares: This schema includes share information such as creation date, the user who created the share, and the post that was shared.
- Followers/Following: This schema includes information on which users follow each other.
Your schemas may be different depending on your business logic. You may also need more schemas or more properties .
By answering these questions and understanding the relationships between entities, developers can design an ERD that accurately represents the data requirements for the marketplace web app. The ERD must ensure data consistency, integrity, and performance, and the relationships between entities will significantly impact the code written to interact with the database.
- What are the entities in the system? Entities are the objects or concepts that are relevant to the system. For example, in a social media platform, the entities might include users, posts, comments, likes, and followers.
- What are the relationships between the entities? Relationships describe how the entities in the system are connected to each other. For example, in a social media platform, a user can create a post, a post can have multiple comments, and a user can follow other users.
- What attributes are associated with each entity? Attributes are the characteristics or properties of each entity. For example, a user entity might have attributes such as username, email address, and profile picture.
- What are the cardinalities of the relationships between entities? Cardinalities describe the number of instances of one entity that can be associated with another entity. For example, a user can create multiple posts, but a post can only be created by one user.
- What are the constraints or business rules that apply to the entities and relationships? Constraints are the rules that govern the behavior of the system. For example, in a social media platform, a user cannot follow themselves, and a post must have a minimum length of characters.
You can choose up to 3 elective features from the list below to make your app cooler, but feel free to come up with your own feature as well. If you decide to do so, make sure to discuss it with your mentor and have a clear plan on how to implement it.
-
Features with a blank page icon, like Forget & Reset Password, are simple enough that we encourage you to come up with the solution yourself.
-
Features with 2 lines in the icon, like Simple Chat between users, are the more challenging ones that include suggestion on how to approach them. You can click on those page to see more.
https://firebase.google.com/ https://www.freecodecamp.org/news/building-a-real-time-chat-app-with-reactjs-and-firebase/
- Add a "Groups" collection to your MongoDB database to store group information such as group name, group description, group members, and group posts.
- Create a form on your app where users can create a new group by providing a group name, group description, and selecting a category or interest that the group will be based on.
- When a user creates a new group, add the group information to the "Groups" collection in MongoDB and make the creator of the group the first member.
- Allow users to search for and join existing groups by browsing categories or interests, or by searching for a specific group name or keyword.
- When a user requests to join a group, add their user ID to the "group members" field in the corresponding group document in MongoDB.
- Implement a way for users to post in a group by creating a form where they can write a post and submit it to the corresponding group.
- When a user posts in a group, add the post information to the "group posts" field in the corresponding group document in MongoDB.
- Display the posts in a group on the group page for all group members to see.
- Allow users to leave a group if they no longer want to be a member.
- Ensure that only members of a group can post in the group, and that non-members cannot view the group posts.
- Tag other users in posts and comments