Under the Hood

I love React JS and most importantly the concept of reusing. Its quite something I cant even think of while writing vanilla javascript back in 2018.

Fast forward to today, If you have to develop an MVP or project you are taking more than 3/4 weeks.

Most of the startups are not launching MVP within 6 weeks because development work is F***.

No Plan is basically a step towards Failure.

Building Frontend Full Stack Repository

First, we will define the purpose of this repository.

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or
github.com

Purpose

• I dont want to create same repository again and again
• Single repository work with all kind of websites
• Single repository with best architecture and libraries
• Single repository that is easy to scale and understand
• Single repository created on top-tech stack

Once the purpose is clear, we can start with implementing the idea.

The top tech stack for 2023 are

1. Next.JS Frontend framework
2. React Javascript framework
3. Vercel Hosting
4. Github Version Control
5. Tailwind CSS Styling
6. UI library UI Components
7. React Query Data fetching/caching
8. Firebase/Supabase/Appwrite/PocketBase/MongoDB Database
9. React Icons Icon library
10. React Framer/React Spring Animation

You can have different choice for UI library, animation libraries and so on. But try to match 60% of tech stack because Ive 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 cant 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.

Here is the wrap concept

<ReactQueryProvider>  <ReduxProvider>    <UI Library Provider>      <Component /> // application code    </UI Libary Provider>  </ReduxProvider></ReactQueryProvider>

The wrapping works almost the same for all kinds of packages. This above code is the return or output from _app.js inside the pages directory.

Layout
Every website has a layout, including, Navbar, Footer, Body, log in form and so on.

I prefer to create a layout or so-called body and wrap it to the Component as shown in the above code snippet.

Your layout code will look like

const Layout = ({ children }) => {  return (    <div>      <Navbar />      {children}      <Footer />    </div>  )};export default Layout;

Now we just need to wrap this layout to the component module in the _app.js.

<ReactQueryProvider>  <ReduxProvider>    <UI Library Provider>      <Layout>        <Component /> // application code      </Layout>    </UI Libary Provider>  </ReduxProvider></ReactQueryProvider>

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

Ive 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.

Ive 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 dont 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?

Ive used almost every kind of frontend package and what Ive 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.

Clone the repositoryrun yarnrun yarn run devopen localhost:4001

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or
github.com

Conclusion

Feel free to put any questions in the comment box, I am here to answer.

Get the repository from this link

Clone the repositoryrun yarnrun yarn run devopen localhost:4001

Until next time, have a good day.
Shrey
iHateReading