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.
This project is graded based on the following criteria:
-
Satisfies the following code requirements:
-
Application uses React for the front end.
-
Application has a GraphQL API with a Node.js and Express.js server, and uses queries and mutations for retrieving, adding, updating, and deleting data.
-
Application uses MongoDB and the Mongoose ODM for the database and protects sensitive API key information on the server.
-
Application includes user authentication using JWT.
-
-
Application should be a unique and novel idea.
-
Your group should clearly and concisely articulate your project idea.
-
Application deployed at live URL on Heroku and loads with no errors.
-
Application GitHub URL submitted.
-
Repository has a unique name.
-
Repository follows best practices for file structure and naming conventions.
-
Repository follows best practices for class and id naming conventions, indentation, quality comments, etc.
-
Repository contains multiple descriptive commit messages.
-
Repository contains a high-quality README file with description, screenshot, and link to deployed application.
-
Application user experience is intuitive and easy to navigate.
-
Application user interface style is clean and polished.
-
Application is responsive.
-
Your group should present using Google Slides, Powerpoint, or a similar presentation software.
-
Every group member should speak during the presentation.
-
Your presentation should follow the Project Presentation Template.
- There are no major disparities in the number of GitHub contributions between group members.
Fulfilling all three of the following requirements to turn your app into a PWA will add 10 points to your grade. Note that the highest grade you can achieve is still a 100:
-
Uses a web manifest
-
Uses a service worker for offline functionality
-
Is installable
Each member of your group is required to submit the following for review:
-
The URL of the deployed application.
-
The URL of the GitHub repository, with a unique name and a README describing the project.
© 2021 Trilogy Education Services, LLC, a 2U, Inc. brand. Confidential and Proprietary. All Rights Reserved.