Fullstack Project Planning

So, this week I meant to put up the next post in my MERN stack project series, but I realized that I was leaving out a huge part of the project-process by not talking about proper project planning. For most of my projects, especially recently, I've been following a planning process that helps me breakdown the project into component parts that help me build more efficiently.

Here's a basic project planning breakdown:

• Scope
• Database Modeling
• API Endpoint Planning
• Backend Build
• Backend Testing
• Wireframing/Sketches
• Component Planning
• Frontend Build
• Frontend Testing

Below are the questions and elements of each part of the process...

Scope

This step simply involves planning the scope of the project in question. Are you building both a backend and frontend? Do you need to account for user authentication? Will you be using any external/third-party APIs?

Database Modeling

If you've decided to build a fullstack project, what database will you be using? What database models will you need? If you're using a relational database, what relationships do you need between models? If you're using MongoDB, do you have a cluster available to put your collection in?

API Endpoint Planning

You've got your database set up, so now it's time to plan out your endpoints! Do you need full CRUD endpoints for every model? Are you planning to handle query parameters with your API? Which endpoints will be public, and which will be protected? How will you protect those endpoints that aren't publicly accessible?

Backend Build

Time to build!! Are you using Rails, Express, Django, or something else? Where will you host your API?

Backend Testing

Test your code, folks! Build out tests as you go with your testing framework/tool of choice. I also really love using something like Postwoman/Postman or Insomnia for manually testing API endpoints. They let you mock your API calls to make sure your responses are coming through as expected.

Wireframing / Sketches

We made it to the frontend design! 🎉
This step is crucial and is the step I most frequently skip and I always regret it.
Even if you don't consider yourself a designer, sketching out a basic concept layout makes the coding process so much easier. This step is even easier if you're using a UI library like Material UI or Bootstrap, because you can plan out which components/classes you'll use ahead of time.

Component Planning

If you're using a component based framework like React, it's a really good idea to look at your sketches and break them down into components. Where are your containers? Which components maintain state? Can you create a "single source of truth" for your app to keep your state in check? Planning this out ahead of time will save you so much frustration later on.

Frontend Build

We did it, y'all! We made it to the frontend build process!
Even though this is ostensibly the last step, it could certainly be one of the longest.
Do you know which frameworks or CSS pre-processors you'll use, if any? Do you have your fonts, and colors, and style elements chosen? Are you using them consistently? Are you designing mobile-first and for accessibility? If not, you should be!

Frontend Testing

This step is coupled with the prior build test. Write your tests as you go, and make sure you're covering edge cases appropriately. How are you handling errors from a UI perspective? Does your app or site fail well? If not, how can you better handle errors for your users?

User Testing

If you want to be really ambitious, and don't mind sharing your project with others, it's a great idea to get some opinions from users. They might find edge cases you missed, or have suggestions for improving your app that you might be too close to the project to see on your own.

For beginners working on their first portfolio project, this list can feel really long and really intimidating, but fear not! My favorite thing about this list, and this process, is that each step is relatively self contained, and each one builds on the last. And you don't necessarily have to have everything planned ahead of time. Maybe you'll plan out the database and API endpoints, and start on your backend build, before you really start thinking much about your front end. Or maybe you'll design a really beautiful frontend mockup and then plan out a backend to fit into that design.

Either way, planning is your friend! I've only really recently gotten a handle on proper project planning and it's made the process so much more efficient.

I hope this list helps you get your next project finished just a little bit more efficiently!

xx
Emily / TheCodePixi

This article was originally posted on TheCodePixi.dev/blog