This third project is your first foray into building a MERN Stack application. You'll be building a MERN app, which means you'll learn about what it takes to build a functional application from the ground up yourself.
This is exciting! It's also a lot, but we have been giving you the tools for your toolbelt during the course, and you get to decide what you do with it. You get to be creative in choosing what sort of application you want to build!
We hope you'll exercise creativity with this project, sketch some wireframes before you start, and write user stories to define what your users will want to do with the app.
Make sure you have time to run these ideas by your instructors to get their feedback before you dive too deep into code!
Remember to keep things small and focus on mastering the fundamentals -- scope creep/feature creep is the biggest pitfall for any project!
Your app must:
- Have at least 3 models (more if they make sense) These models also should have some type of relationship.
- Include sign-up / sign-in / sign-out functionality, with encrypted passwords & an authorization flow.
- Utilize Mongoose to create your models and add the proper validations.
- Have a RESTful API that will be called from the client side to display data.
- Have a Responsive Design, we recommend you
start
mobile-firstand then build up for larger screen sizes! - Create your React components that will implement all the features of your project.
- Be deployed online and accessible to the public.
- Project Presentation, done with slides.com.
- A working MERN stack application, built by you, hosted somewhere on the internet (likely Heroku, Firebase, Netlify).
- A link to your hosted working application in the URL section of your GitHub repo.
- A
readme.mdfile with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc. - A Git repository hosted on Github, with a link to your hosted project.
You need to upload your links here
- Begin with the end in mind. Know where you want to go by planning with wireframes & user stories, so you don't waste time building things you don't need, KEEP IT SIMPLE.
- Don't hesitate to write throwaway code to solve short term problems.
- Don't start coding the API without planning which URLs you need. Determine which react components you need, and what information you'd like to display, and only then create the endpoints.
- Read the docs for whatever technologies you use. Quite often, there are tutorials to walk you through whatever unique technologies you're going to use (mapbox, cool frontend libraries, etc). If there isn't, your only resource is the documentation. Read the docs. If there's no documentation, it's probably a library that is not worth using.
- Commit early, commit often. Don't be afraid to break something because you can always go back in time to a previous version.
- Deploy early, deploy often. Don't wait until the eleventh hour to deploy. You can deploy at any time, and you should. You should plan for at least 2-3 hours of configuration for your first deployment. After that, it is much quicker. Deploy once you have your database and application setup, and then deploy at the end of every day.
- User stories define what a specific type of user wants to accomplish with your application. It's tempting to just make them todo lists for what needs to get done, but if you keep them small & focused on what a user cares about from their perspective, it'll help you know what to build.
- Write pseudocode before you write actual code. Thinking through the logic of something helps. Talk yourself through the problem. Talk to your classmates about the problem. Buy a rubber duck.
- Heroku (for hosting your back-end)
- Writing Good User Stories (for a few user story tips)
- Presenting Information Architecture (for more insight into wireframing)
-
Technical Requirements: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?
-
Creativity: Did you added a personal spin or creative element into your project submission? Did you deliver something engaging and playable to the end user?
-
Code Quality: Did you follow best practices covered in class, such as spacing, modularity, and semantic naming?
-
Deployment: Did you deploy your application using Heroku?
-
Total: Your instructors will give you a total score on your project between:
Score Expectations 0 Does not meet expectations 1 Meets expectactions, good job! 2 Exceeds expectations, you wonderful creature, you!
This will be useful as an overall gauge of whether you met the project goals, but the more important scores are described in the specs above, which can help you identify where to focus your efforts on your next project!
- Presentation Time: 5 minutes
- Feedback: 3 minutes
- Total Time: 8 minutes
- DRESS TO IMPRESS: Smart casual would be great.
- A presentation in slides.com
- The presentation and demo will not be executed on your computer
- Get ready to explain some of your code in GitHub
This is preparation for your final presentation
- Short presentation of yourself:
- Who are you?
- A hobby you have
- Elevator pitch:
- Application you want to build
- Why did you choose that application (problem / solution format)
- The most important feature of your application
- One technical challenge you faced:
- Explain the challenge
- Explain how and what you did to overcome it
- Show and explain code snippets in your presentation slides
- Technologies you have used:
- If you use a super cool library or tool out of the scope of the classroom, show off! Don't repeat the MERN stack, as everyone will be using it
- One important mistake you made:
- Did you made a mistake planning your time? Maybe scoping your feature? Conceptualizing your application? Wrong planning of the API? Coding?
- Git:
- Display an screenshot of your GitHub graphs to show your commit frequency
- Product Demo:
- Show a user story (eg. how an actual user will use the application)
- Demonstrate the important feature of your application
- Quickly go through other supporting features if you have them
- Roadmap:
- What are 3-5 features you'd build if you had the time?