You can have different choice for UI library, animation libraries and so on. But try to match 60% of tech stack because I’ve worked with all kind of libraries and stacks and trust me I found these as powerful and easy to use.
Architecture
If you are new to my stories, let me tell you, I am a big fan of architecture.
I can’t work on repository whose architecture and folder structure is not scalable, easy to understand and well-defined acc. to the purpose respectively.
So I will always focus on architecture I know architecture is more related to personal understanding but the core fundamentals should remain the same for everyone.
Use the reusable concept of React, this will certainly help you to build better architecture over time.
Another rule I follow is the naming convention, for example,
Components = Folder contains all pages of the website (About, Home, Login) Modules = Contains all the reusable smaller components of the website (Login form, subscribe form, modals, cards and so on) Utils = Contains all utilities (Hooks, Javascript methods, APIs) Pages = Contains routes of the application(/home, /about) Public = Static directory for static files
Now, you can rename them accordingly but the fundamentals should remain the same.
First is to install all libraries and wrap their respective providers if required to the root of the application.
For example, React Query, UI Library, Redux and all of them provide providers to wrap to the root of the application.
In this way, every page of the website will have Navbar and Footer rendered at the top and bottom respectively.
Architecture and Layout are Done, Last part is left
Installing Packages
I’ve already listed the packages I used for almost every application. Installing is quite straightforward using yarn or npm and you are done.
yarn add {package name}
But some of the packages need configuration and importing to add in order to use them in the application. For example, Firebase needs your database URL and the API keys, same with the Supabase.
I’ve already added that for you in the repository and you can twist them anytime according to your need.
I believe this information is enough to get started with your Full Stack project.
FAQ
Yes, you might have a lot of questions, although the comment BOX is open to ask them anytime and I am always there to reply asap.
What if I don’t like the naming convention?
As I already told rename the folders according to your need, just try to stick to the fundamentals that are important.
What if I prefer other packages?
I’ve used almost every kind of frontend package and what I’ve listed is the top tech stack used by almost the majority of companies.
Even if you feel anything you want to add, for example, React Hook Form, Framer Motion or Styled Component then go ahead, the entire repository is highly customisable.
How to get the repository?
The repository will be available on Github and anyone can view and clone it.