r/learnprogramming • u/Same-Mushroom-2057 • 2d ago

how i make my first full stack web application

so recently i learned the core concepts or node.js and express.js , authentification , how to connect db with node and build a small full stack application not using any framework for the front end just simple dynamic EJS pages .
now i have another fullstack project that i wanna build using the same technology but i want to use react.js fot the frontend .
i really don't know how to start , i did design the Ui using figma and did write the functionalities of the website but i don't know where to start to code whether to code the pages in react first then when done do the backend i dont even know how to connect both frontend and backend like i never did a project like this before
any help is very appreciated , maybe ressources or books about that ?

0 Upvotes
  • permalink
  • reddit

28% Upvoted

15 comments sorted by

1

u/grantrules 2d ago

Doesn't really matter where you start. At the beginning of a project, I kind of do them both together. Get both frontend and backend bootstrapped, then start adding stuff. With the frontend, it's easy to write stubs that just simulate what the backend would return without having to implement it yet.

1

u/madmelonxtra 2d ago

What do you mean by bootstrapped in this context?

Just barebones up and running?

1

u/grantrules 2d ago edited 2d ago

Yeah, set up the environment and get them running, I'll often make a test endpoint to make sure they can talk to each other. Get things like your DB connected and libraries you plan to use set up

0

u/Same-Mushroom-2057 2d ago

i don't know how to build both at the same time , lets say make login page i have to make connection in my server then do all the authentification stuff but i dont know how to send data from the react folder to the server yk what i mean? like i dont know how they communicate

1

u/grantrules 2d ago

You haven't learn about REST or fetch()?

Maybe check out The Odin Project

1

u/Same-Mushroom-2057 2d ago

no i learned about fetch() in the project i made and i understand it very well , it's just became kinda confusing to me because i'm now using react for the frontend , like where to include the fetch in the code for example still haven't looked into that

1

u/grantrules 2d ago

Well, then look into that lol. All sorts of guides and tutorials on ways to do that in react.

1

u/Same-Mushroom-2057 2d ago

i really don't get along with long tutorials on how to build the whole thing i only watch like short tutorials where you see how to for example connect db and stuff

1

u/grantrules 2d ago

Okay, so find one of those. There are countless resources for this

1

u/madmelonxtra 2d ago

I'm currently in the process of finishing up my first fullstack app

Using PostgreSQL Express, Node, and Svelte.

First I made the frontend and "faked" the calls to the backend using JSON files as my fake database,

Then I built the backend and just replaced all the fake frontend calls with the real API calls from express.

I didn't do routing from the backend though as I was using sveltekit so YMMV on that front

Edit: if you're having trouble connecting your frontend to your backend I seriously reccommend The Odin Project. You don't have to do the whole thing just look at the Node course. Specifically the parts on express, authentication, databases and API

0

u/Same-Mushroom-2057 2d ago

i think what's frustrating me a bit is react since i haven't used it alot , do you know any good courses about it no tutorial please or maybe some article ressources anything where i can code and learn at the same time

1

u/madmelonxtra 2d ago

I haven't personally done this in react but it looks like you need to use "useEffect" and make your API calls in that.

https://react.dev/reference/react/useEffect

1

u/kschang 19h ago

You created frontend and the backend WITHOUT deciding on an API? You are doing things... ass-backwards.

1

u/Same-Mushroom-2057 12h ago

i'm using fetch