Projects have played a key role in your journey to becoming a full-stack web developer. As you apply for development jobs, your portfolio is absolutely vital to opening doors to opportunities. Your portfolio showcases high-quality deployed examples of your work, and you can use your finished projects for that very purpose.
This project is a fantastic opportunity to show employers your collaborative skills and coding abilities, especially in the context of a scalable, user-focused MERN app. Remember that employers want to see what you can do, but they also want to see how you work with other developers. The more examples of deployed collaborative work you have in your portfolio, the more likely you are to get an interview and a job.
Your group will use everything you’ve learned throughout this course to create a MERN stack single-page application that works with real-world data to solve a real-world challenge, with a focus on data and user demand. This project will provide you with the best opportunity to demonstrate your problem-solving skills, which employers will want to see during interviews. Once again, the user story and acceptance criteria will depend on the project that you create, but your project must fulfill the following requirements:
-
Use React for the front end.
-
Use GraphQL with a Node.js and Express.js server.
-
Use MongoDB and the Mongoose ODM for the database.
-
Use queries and mutations for retrieving, adding, updating, and deleting data.
-
Be deployed using Heroku (with data).
-
Have a polished UI.
-
Be responsive.
-
Be interactive (i.e., accept and respond to user input).
-
Include authentication (JWT).
-
Protect sensitive API key information on the server.
-
Have a clean repository that meets quality coding standards (file structure, naming conventions, best practices for class and id naming conventions, indentation, high-quality comments, etc.).
-
Have a high-quality README (with unique name, description, technologies used, screenshot, and link to deployed application).
Instead of using a CSS library like Bootstrap, consider one of the following suggestions:
-
Look into the concept of CSS-in-JS, which abstracts CSS to the component level, using JavaScript to describe styles in a declarative and maintainable way. Some popular libraries include styled-components and Emotion.
-
Try using a component library, such as Semantic UI, Chakra UI, or Ant Design.
-
Create all the CSS for your application just using CSS.
Ultimately, it doesn't matter which of these options you choose—it just needs to look professional and be mobile-friendly.
Consider integrating the Stripe payment platform. Even if you don’t create an e-commerce application, you could set up your site to accept charitable donations.
Although this is not a requirement for your project, see if you can also implement functionality to meet the minimum requirements of a PWA:
-
Uses a web manifest
-
Uses a service worker for offline functionality
-
Is installable
Use this project presentation template to address the following:
-
Elevator pitch: a one minute description of your application
-
Concept: What is your user story? What was your motivation for development?
-
Process: What were the technologies used? How were tasks and roles broken down and assigned? What challenges did you encounter? What were your successes?
-
Demo: Show your stuff!
-
Directions for Future Development
-
Links to the deployed application and the GitHub repository. Use the Guide to Deploy with Heroku and MongoDB Atlas on The Full-Stack Blog if you need a reminder on how to deploy to Heroku.