React.js

Reactjs Template (Include Tailwindcss, TypeScript & JavaScript)

This is a React.js project bootstrapped with vitejs.

Technologies Used

• React.js (Typescript)
• Tailwindcss
• Axios

Features

The features included in this project template are:

• Project Architecture.
• Authentication.
• Customize React Hooks.
• Some custom functions that I often use.

Architecture Projects

There are several important points related to how to run a proper architecture project. For this case study, I have created a customized blank project template that I have implemented how to organize a good architecture project so that it looks tidy.

/
├── public/
├── src/
│   └── components/
│   │   └── Common/
│   │   └── Containers/
│   │   └── Mixins/
│   │   └── README.md
│   └── config/
│   └── context/
│   └── data/
│   └── hooks/
│   └── interfaces/ # TypeScript only
│   └── layouts/
│   └── lib/
│   └── pages/
│   └── providers/
│   └── index.css
│   └── main.jsx # or main.tsx
│   └── vite-env.d.ts # TypeScript only
└── .gitignore
└── .eslint.config.js
└── index.html
└── jsconfig.json # JavaScript only
└── package.json
└── postcss.config.js
└── README.md
└── tailwind.config.js
└── tsconfig.app.json # TypeScript only
└── tsconfig.json # TypeScript only
└── tsconfig.node.json # TypeScript only
└── vite.config.js # or vite.config.ts

Common Folder

The Common folder is located in /src/components/. So what does it contain? The Common folder contains small components, such as: buttons, dropdowns, etc.

Mixins Folder

The Mixins folder is located in /src/components/. So what does it contain? The Mixins folder contains components that are a combination of small components from the Common folder. Such as: navbar (which contains some common things such as buttons, dropdowns, etc.).

Containers Folder

The Containers folder is located in /src/components/. So what does it contain? The Containers folder contains a combination of the Common folder and the page itself which form 1 page. 1 page 1 Containers folder to keep it tidy.

If 1 container has several sections, then you must separate and put them in the components folder but still in 1 Containers folder. Such as: /src/components/Containers/Home/components.

Authentication

This project template already uses authentication using React Context. If the user has authenticated, the user cannot access the login or register page again.

React Hooks Customization

You can use, and add your own custom React Hooks to the /src/hooks folder that has been provided. There is an example of React Hooks customization for Data Fetching using Axios.

Getting Started

This template is available on BikinProject! How to use this template, follow these simple steps:

1. Install BikinProject: Start by installing BikinProject on your machine.

  npx bikinproject@latest

2. Tell BikinProject Where to Create the Project: Input a directory where you want to create your project.

  ┌   create-bikinproject-app
  │
  ◇  Where should we create your project?
  └  ./your-project # Input your project name, e.g. my-project or .

3. Choose a Starter Project: Choose a starter project that suits your needs.

  ┌   create-bikinproject-app
  │
  ◇  Where should we create your project?
  │  ./your-project
  │
  ◇  Pick a project type within "./your-project"
  │  ● React.js (Tailwind + TypeScript)
  │  ○ React.js (Tailwind + JavaScript)
  │  ○ dll.
  └  # Pilih jenis proyek dengan menggunakan tombol panah

4. Choose include install dependencies: Choose to install dependencies or not.

  ┌   create-bikinproject-app
  │
  ◇  Where should we create your project?
  │  ./your-project
  │
  ◇  Pick a project type within "./your-project"
  │  React.js (Tailwind + TypeScript)
  │
  ◇  Install dependencies? (currently only NPM is supported)
  │  ● Yes / ○ No
  └  # Select Yes or No by using the arrow keys

5. Wait for BikinProject to Create the Project: Wait for BikinProject to create the project for you.

  ┌   create-bikinproject-app
  │
  ◇  Where should we create your project?
  │  ./your-project
  │
  ◇  Pick a project type within "./your-project"
  │  React.js (Tailwind + TypeScript)
  │
  ◇  Install dependencies? (currently only NPM is supported)
  │  No
  │
  ◇  ⏳ Creating project...
  │
  ◇  🎉 Project Created!
  │
  ◇  Next steps. ───────────────╮
  │                             │
  │  cd ./your-project          │
  │  npm install                │
  │  npm run dev                │
  │                             │
  ├─────────────────────────────╯
  │
  └  Have a Problems? Report to https://github.com/nuflakbrr/bikinproject/issues

6. Start Building Your Project: After BikinProject generate the starter project, you can start building your project.

7. Copy Environment Variable: Copy the environment variable with the following command

cp .env.example .env

8. Open Development Server: Open http://localhost:5173 in your browser and see the result.

You can start editing the page by modifying /src/components/Containers/Home/index.(jsx/tsx). The page updates automatically as you edit the file.

Learn More

To learn more about React.js, see the following resources:

• Documentation React.js - interactive React.js tutorials.

You can check out the React.js GitHub Repository - your feedback and contributions are welcome!

Author of This Template

Contributor names and contact info,

Naufal Akbar Nugroho
@nuflakbrr @kbrnugroho