shrey vijayvargiya

Posted on Jan 11, 2023

2023 Frontend Full Stack Repository

#github #programming #tutorial #javascript

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.

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 don’t 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

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

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

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.

shreyvijayvargiya / 2023-Full-Stack-Frontend-Repository