DEV Community

Fullstack Project Planning

Emmy | Pixi on July 04, 2020

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-pro...
Collapse
 
sharkham profile image
Sam Markham

Excellent overview of the planning process, thanks for sharing! I've definitely missed and then come back to some of these later during projects--bookmarking this to look at again for planning my next app!

Collapse
 
thecodepixi profile image
Emmy | Pixi

Yeah I made this partially for future me who knows that past me has definitely scrimped on planning before lol

Collapse
 
polinetuch profile image
Polinet Uch

Just the article that I was looking for! I love how you break down the lists above. From there, I can actually break each of them into smaller chunks for me to be able to get started. Very helpful for me as I am currently working on a project for a friend's online business. Thanks for the tips!

Collapse
 
thecodepixi profile image
Emmy | Pixi

Perfect! I'm so glad it helped you!

Collapse
 
sumukhesh profile image
Sumukhesh

The most concise list I have seen. I know it can be overwhelming to even think of a check list for a full stack project, but this list contains almost everything that a production ready app requires. I believe deployment should also be added to this to make it more robust.
Great job. Surely saving the post.

Collapse
 
akdeberg profile image
Anik Khan

Dev with a plan! Very nice.
Breaking the planning process like this makes it much more comprehensive. Btw, I actually prefer to start the process from designing front end.
I wonder what's your reason to start from backend?

Collapse
 
thecodepixi profile image
Emmy | Pixi

Honestly, I'm just not much of a designer, so I think my brain tends to default to thinking about the underlying system. I think about a problem I want to solve, or what kind of user experience I want to have, then I build the necessary backend for it. Then I try to design a front end around that system. It's actually probably a better idea to design a UI first, and build a backend to fit what the frontend needs.

Collapse
 
vittoriogassman profile image
VΓ­ctor Liendo • Edited

I'm with you Emily. I've been in the software world for years (that does not mean i know too much or that I'm a true expert). Most of the projects I've been part of started by designing or solving the "source of data" problem, where the data will reside, and the underlying business rules. Way back when, we talked about Databases. Nowdays DDD -> Database -> Backend. By solving them we will have most of the business rules implemented. Then, we should code a front end that even could be required for different types of devices. However, in favor of what Anik wrote above, is a good idea to have a basic prototype, layout, screens, that can help the customer see what he/she is going to get as a software product (at least for the main or critical parts of it)

Collapse
 
akdeberg profile image
Anik Khan

Cool! Got it. πŸ™‚

Collapse
 
thecodepixi profile image
Emmy | Pixi

So true! That's why I mentioned at the end that the order isn't set in stone. Sometimes the frontend goal informs the needs of the back end, and vice versa. Totally valid and sometimes necessary to flip flop the order.

Collapse
 
eecolor profile image
EECOLOR

I would advise to do these steps per feature (or part that can be developed separately).

This is similar to how your directory structure should look (on the internet they often call it package by feature vs package by layer).

The benefit of going through all of the steps for concrete features is that you get feedback early and get a firm grasp of your actual progress. It also helps you figure out what works and what not for the specific situation saving you tons of rewrite work.

Collapse
 
mullojo profile image
Bob

Very nice post! Have you heard of or ever tried Meteor for a MERN stack equivalent? It's kind of a dream! ❀️

Meteor gives you a CLI on top of Node.js that tightly integrates the entire full stack. And you get an amazing build tool (replacement for Webpack or equiv) and real time data connections from MongoDB all the way to the client with pub/sub, which is perfect for multi-user apps where you need client to client updates.

Also instead of using HTTP requests to your own server, Meteor gives you Methods with the simplest API imaginable.

I guess this all comes down to the most productive JS development stack on the planet. So if you like to build things, you spend 10 hrs instead of 100 hrs, or 1k hrs instead of 10k hrs πŸ˜€

It gives you mobile & desktop app capabilities too. I turned my web app into mobile & desktop versions via some PWA features in just a couple hours, and Meteor's build system can also effortlessly produce a Cordova web app for Apple & Google stores.

Happy coding!! πŸŽ‰

Collapse
 
mullojo profile image
Bob

I love this approach too! The front-end really should shape the backend & database structure for new apps in an ideal world. This is natural and why MongoDB is the perfect choice for a database. And this is all even easier in a Meteor app. The most common Meteor front-end (view layer) today is React. Today I mostly use Vue + Meteor for JS app development. It's amazing!

Collapse
 
sunitk profile image
Sunit Katkar

What about security? OAuth2 with JWT? SAML?

Collapse
 
quickfingersdev profile image
quickfingers

First of all thank you for this it's very informative. Is there any sub steps on each step?

Collapse
 
thecodepixi profile image
Emmy | Pixi

I tried to leave that open ended because that will vary pretty widely between projects based on what you're building and the tools you're using.

Collapse
 
thecodepixi profile image
Emmy | Pixi

I'm glad it helped! I've been trying to focus more on time management and getting more efficient and the planning process is key.

Collapse
 
neomonst profile image
NeoMonst • Edited

Basically, the way you making it is the same as what I was taught in my uni to build a web project. And the lecturer told me, he changed to teaching back-end first since my semester.

Collapse
 
jasterix profile image
Jasterix

This is great! I wish more people talked about planning for a project rather than just diving in

Collapse
 
thecodepixi profile image
Emmy | Pixi

Right!? Planning is everything!

Collapse
 
vickilanger profile image
Vicki Langer

I never realized there were sooooo many steps. Well, at least I never broke them down so well. Thanks for explain each part so well! I’ll definitely be coming back to this as a reference

Collapse
 
thecodepixi profile image
Emmy | Pixi

So. Many. Steps. But all of them are totally worth taking the time for.

Collapse
 
darkmg73 profile image
DarkMG73

Thanks!

Collapse
 
nerajno profile image
Nerando Johnson

As usual, never short of spectacular.

Collapse
 
naweli_verma profile image
Naweli Verma

Appreciate it!!

Collapse
 
jamesnm profile image
James Moore

Great breakdown thanks @thecodepixi !