MERN STACK PROJECT -- 2
Budget: $30 – $250 USD
For this project, you will be making another full CRUD app using the technologies outlined below.
******MANADATORY GUIDELINES FOR THE PROJECT PLEASE FOLLOW: THERE IS NO WORKAROUND SO PLEASE DONT ASK IF YOU CAN DO SOMETHING ELSE OR USE SOMETHING ELSE. THIS IS IT. THANK YOU :) *****
A working full-stack application, built by you, using the MERN stack: Node.js, MongoDB/Mongoose, Express and React.
At least two models with full CRUD.
Follow proper MVC backend structure (models, controllers, routes in separate folders)
Uses React Router (but you can have as many pages and components as you need)
Include sign up/login (authentication) functionality, with encrypted passwords & an authorization flow
Use of axios, local storage, and JWT tokens
Use of a CSS framework for styling (Bootstrap, MaterialUI, Skeleton, Tailwind, etc.)
Use some sort of daily tracker to help organize your workflow (e.g. Trello.).
Frequent GitHub commits dated from the beginning of the project through its completion (at least 15)
Be deployed online and accessible to the public (render.com)
A README.md file (should include a link to your hosted working website) with explanations of the technologies used, the approach taken, unsolved problems, user stories, and notes to yourself so you can come back to your project later in the course and be able to pick up your train of thought, etc
Stretch goals:
Manage at least some part of state with the useReducer and useContext hooks (together) or ReduxLinks to an external site. (npm install @reduxjs/toolkit react-redux)
Pull from a third party API - either client side with AJAX or server-side with an NPM
Project Source control & README
The project's source code for both your Express Backend and React Frontend must be hosted on a personal GitHub repository.
The repo is to contain frequent commits dated from the beginning of the project through its completion.
The project must include a README.mdfile with the following sections:
Introduction: A paragraph used to introduce interested parties to the project and needs to include one or more screenshots.
Technologies Used: A list of all technologies, libraries, APIs, etc. used in the project.
Getting Started: Links to the project's planning (Trello board) and the deployed app on Heroku.
Unsolved Problems: List any unsolved issues.
Future Enhancements: Identify future features and enhancements planned for the project.
Project planning with Trello
You can organize the planning for your project with the following lists:
Icebox: Holds user stories that have yet to be moved to the Current/MVP list. All user stories are originally put into the Icebox, including both MVP and wish list stories.
Current/MVP: Holds user stories that must be completed to meet the minimum project requirements (MVP). Once the MVP has been met, additional user stories may be moved from the Icebox.
Completed: Hold completed user stories.
Wireframes: Sketches of each screens's user interface for the major functionality of the application.
Entity-Relationship-Diagram (ERD): A diagram of the app's models (one per data entity) and the relationships between them.
User stories need to be formed properly using this template:
As a <role>, I want <feature> so that <reason>. The reason is optional if it's patently obvious.
******MANADATORY GUIDELINES FOR THE PROJECT PLEASE FOLLOW: THERE IS NO WORKAROUND SO PLEASE DONT ASK IF YOU CAN DO SOMETHING ELSE OR USE SOMETHING ELSE. THIS IS IT. THANK YOU :) *****
A working full-stack application, built by you, using the MERN stack: Node.js, MongoDB/Mongoose, Express and React.
At least two models with full CRUD.
Follow proper MVC backend structure (models, controllers, routes in separate folders)
Uses React Router (but you can have as many pages and components as you need)
Include sign up/login (authentication) functionality, with encrypted passwords & an authorization flow
Use of axios, local storage, and JWT tokens
Use of a CSS framework for styling (Bootstrap, MaterialUI, Skeleton, Tailwind, etc.)
Use some sort of daily tracker to help organize your workflow (e.g. Trello.).
Frequent GitHub commits dated from the beginning of the project through its completion (at least 15)
Be deployed online and accessible to the public (render.com)
A README.md file (should include a link to your hosted working website) with explanations of the technologies used, the approach taken, unsolved problems, user stories, and notes to yourself so you can come back to your project later in the course and be able to pick up your train of thought, etc
Stretch goals:
Manage at least some part of state with the useReducer and useContext hooks (together) or ReduxLinks to an external site. (npm install @reduxjs/toolkit react-redux)
Pull from a third party API - either client side with AJAX or server-side with an NPM
Project Source control & README
The project's source code for both your Express Backend and React Frontend must be hosted on a personal GitHub repository.
The repo is to contain frequent commits dated from the beginning of the project through its completion.
The project must include a README.mdfile with the following sections:
Introduction: A paragraph used to introduce interested parties to the project and needs to include one or more screenshots.
Technologies Used: A list of all technologies, libraries, APIs, etc. used in the project.
Getting Started: Links to the project's planning (Trello board) and the deployed app on Heroku.
Unsolved Problems: List any unsolved issues.
Future Enhancements: Identify future features and enhancements planned for the project.
Project planning with Trello
You can organize the planning for your project with the following lists:
Icebox: Holds user stories that have yet to be moved to the Current/MVP list. All user stories are originally put into the Icebox, including both MVP and wish list stories.
Current/MVP: Holds user stories that must be completed to meet the minimum project requirements (MVP). Once the MVP has been met, additional user stories may be moved from the Icebox.
Completed: Hold completed user stories.
Wireframes: Sketches of each screens's user interface for the major functionality of the application.
Entity-Relationship-Diagram (ERD): A diagram of the app's models (one per data entity) and the relationships between them.
User stories need to be formed properly using this template:
As a <role>, I want <feature> so that <reason>. The reason is optional if it's patently obvious.