Mobilo.design: MERN with SSR from scratch - Project Challenges

Summary

1. Introduction
2. Planing
3. Project Structure
4. Webpack & Babel configurations
5. Chalenges and Reactions
6. Deployments and Integrations
7. Maintenance

---

Introduction

Check what I am building: Mobilo.design
Making a smooth, fast web app to list screenshots of the best in class in production app for IOS and Android, some kind of UX/UI Mobile designs inspiration website, the idea is quite simple, get a database to save apps, screenshots, and other metadata, a backend language as a service provider, and a front end for humans(Just kidding).

---

Planing

Basically, this is the important step I consider while working on a new project, because the stack you choose will go with you all the way long, from building to maintenance, so here's how I choose the MERN stack, first of all, I list my requirements:

Data requirements, why MongoDB?

The first time, I didn't even know what is the data I should be saving for each app or screenshot, I need a flexible database structure (I don't even need a structure), so SQL databases are not a good choice at the time, I go NoSQL and I choose MongoDB, and why MongoDB? because I've never worked with NoSQL databases before, and MongoDB is well known. (Well known === Big Community === Well documented === there is always a solution for your needs).

Backend requirements, Why NodeJS?

Python with beanie, Pydantic & FastAPI, what a winning stack, I've already worked with that before, so I will not struggle a lot, but for SEO purposes, I really need to make use of renderToString from React, and NodeJS with MongoDB, they work better together, So NodeJS.

Frontend requirements, Why React?

I need to React fast (LOL), can't tell why rather I always use React on my projects, even for mobile Apps with React-Native.

Why not Next or Gatsby?

I know, NextJS makes it easy to create SSR web apps, but I really want to do it by myself with Webpack & Babel, should be fun (Not true).

---

Project Structure

Here's another important decision to make, how you are gonna f**ing structure this project, considere that this decision is hard as changing the structure later will cost you a day or two (maybe more).
finnaly I came over this structure:

+AppFolder
--assets
+-src
---Components
---Routes
+-server
---Models
---Routes
+--Providers
----Repositories

---

Whats you taughts about my ways to choose stack and my project folder structure, next post will be about how i configured webpack and babel, what are the packages and plugins i used along the way, don't forget to tell me your taughts and follow me so i can keep writing about my other projects,
exit();

dev.to/@butalin:~$Bye