Full-stack Project Planning Checklist

Check which you need to include in a project:

• [ ] Backend

• [ ] Frontend

• [ ] User authentication

• [ ] External/third-party APIs

  • APIs:

• this is what you want your users to see or to do when accessing your site/app

Example:

You should draw a diagram of your models and connect with their relationship

• What type of database will you use? (i.e., relational or non-relational):

• What database models/schemas will you need?

• If using a relational database, what relationships do you need between models?

• If using MongoDB, do you have a cluster available to put your collection in?

• Do you need full CRUD endpoints for every model?

• Do you plan to handle query parameters with your API?

• Which endpoints will be public and which are to be protected?

• How will you protect those endpoints that aren't publicly accessible?

• [ ] Ruby/Rails

• [ ] Node/Express

• [ ] Python/Django

• [ ] Python/Flask

• Where will you host your API?

• What type of user authorization?

  • [ ] Session tokens

  • [ ] OAuth

  • [ ] JWT

  • [ ] Other:

• Set up notification microservice that provides push notifications, emails, and SMS to users. Use separate channels for sending transactional and promotional SMS

• Create a base model that you can later use for every other model in the database

• Set up asynchronous communication so that users do not have to waste their time as the application sends out welcome emails.

• Build tests as you go and use postman/insomnia for testing endpoints

• Document as you go as well

• Sketch out a basic concept layout

• Use professional graphic tools to get a full picture of your application. Rather than sticking to designing from your code, launch graphic programs to see how your product will look.

• Research well on typography, good fonts can complement the design; try different combinations till you find the right match.

• Fonts:

• Colors:

• Style elements:

Again make a diagram

Component design:

1. Identify the major visual elements

   1. no visual element is minor at this point

1. Arrange your visuals into a tree-like structure (aka visual hierarchy)

   1. GOAL: is to identify the important visual elements and break them into a parent/child arrangement until you can divide them no further

   2. do NOT think of implementing details

   3. do NOT focus on dividing your visual elements based on what combination of HTML and CSS would be required

1. Identify the components

   1. which of the visual elements we've identified will be turned into a component

      1. NOTE: not every visual element will need to be turned into a component

   2. GENERAL RULE: components should do just one thing

Too few:

Too many:

Final Determination:

• [ ] Containers/components?

• Which components need to maintain state?

• What does each component render?

• Can you create a single source of truth for your app to keep your state in check?

• [ ] React?

• [ ] Redux?

• [ ] Bootstrap?

• [ ] Material UI?

• Write out tests as you go

• What edge cases do you need to cover?

• How are you handling errors from a UI perspective?

• Does your app/site fail well?