Under the Hood

I love React JS and most importantly the concept of reusing. It’s quite something I can’t 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.

Build SYSTEMS rather than GOALS.

Developers or Entrepreneurs, jot this line down. You need to make systems rather than goals.

The system is to automate the process, with no repetition of work, fewer meetings, more productivity, less hierarchy and so on.

Even Elon musk has shared 6 productivity hacks where he talked about the system within the organisation.

Watch Ali Abdaal stories, he always says, to focus on building systems rather than goals.

So how your company is running, how the company develop products, how sales and marketing work, all these departments should have systems or process.

Write it down if needed.

How to build a system

This is your personal choice, add your creativity as much as possible. Add your characteristics while making the system.

I will give example, How I create my development system and How I am able to develop applications for hackathons in 5 hours.

If you want to know what I’ve developed, here is the link

Here is the video to watch on How I developed

Building Frontend Full Stack Repository

First, we will define the purpose of this repository.

Purpose

• I don’t want to create the same repository again and again

• Single repository work with all kind of websites

• Single repository with the best architecture and libraries

• A single repository that is easy to scale and understand

• Single repository created on the top-tech stack

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

The top tech stack for 2023 are

• Next.JS — Frontend framework

• React — Javascript framework

• Vercel — Hosting

• Github — Version Control

• Tailwind CSS — Styling

• UI library — UI Components

• React Query — Data fetching/caching

• Firebase/Supabase/Appwrite/PocketBase/MongoDB — Database

• React Icons — Icon Library

• React Framer/React Spring — Animation

You can have different choices for UI libraries, animation libraries and so on. But try to match 60% of the tech stack because I’ve worked with all kinds 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 a 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, log in)

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

Architectutre 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 appliation. For example, Firebase need 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 beleive this much information is enough to get started with your Full Stack project.

FAQ

Yes, you might have 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 are 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.

Conclusion

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

Get the repository from this link.

Do subscribe for more such stories, I’ll reach directly to your 📥 INBOX

Until next time, have a good day.
Shrey iHateReading