/RecyThing-Web

Repository for RecyThing Web (Admin)

Primary LanguageJavaScript

RecyThing - Website (Admin)

RecyThing

Table of Contents

Folder Structure

Before diving into the code, it's important to understand the project's folder structure. The structure is organized to enhance readability and maintainability of the code. Here's a high-level overview of the directory layout:

src
├───apis         # Objects and methods for API calls
├───assets       # Static assets (images, etc.)
├───components   # Reusable components (buttons, sections, etc.)
├───configs      # Configuration files (Axios, Chakra UI Theme, etc.)
├───hooks        # Custom React hooks
├───layout       # Page layouts
├───pages        # Feature pages
├───routes       # Route definitions and routing logic
├───services     # Services (authentication, etc.)
├───store        # Redux store and reducers
├───utils        # Utility functions
├───App.jsx      # Main App file to render pages and routes
├───index.css    # Global styles
└───main.jsx     # Entry point of the app, providers are set up here

Tech Stack

This project uses the following technologies:

Axios Chakra UI Chart.js CKEditor Framer Motion React Hook Form React Router React Redux Toolkit Tailwind CSS Vercel Vite Yup

For more information about the tech stack, please refer to the package.json

Contributors

This project wouldn't be possible without the hard work and dedication of our team. Here are the contributors who brought this project to life:

No Name Role Github Profile Link
1. Taksa Wibawa Team Leader https://github.com/TaksaWibawa
2. Putri Ramadhani Member https://github.com/Putri-R
3. Felicio Angga Member https://github.com/FelicioAngga
4. Dady Bima Member https://github.com/WorkerHarder171
5. Leonardy Wijaya Member https://github.com/Leonardiwijaya
6. Indra Kurniawan Member https://github.com/indrakurr
7. Irfan Maulana Member https://github.com/IrfanM66
8. Rivaldo Member https://github.com/badebess
9. Naufal Darma Member https://github.com/naufalpratam4

How To Export Your Modules (Re-exporting)

Why do we need to re-export our modules?

We need to re-export our modules so that we can import them from a single file instead of importing them from multiple files.

How to re-export our modules?

  1. create a folder named button in src/components

  2. create a file named index.js in src/components/button for re-exporting your button component

  3. create a file named YourButton.js in src/components/button for your button component

  4. in src/components/button/YourButton.js:

    this file will act as your button component

    import React from "react";

export function YourButton() {
 return <button>Your Button</button>;
}

  5. in src/components/button/index.js:

    this file will act as a re-exporter for your button component

    export { YourButton } from "./YourButton";
// or if you have multiple components in this folder
export * from "./YourButton";

  6. lastly, in src/components/index.js:

    this file will act as a re-exporter for all your other components

    export * from "./button";

  7. now you can import your button component from src/components in any file:

    example: we want to import our button component in src/pages/Page.js

    import { YourButton } from "../components";

export function Page() {
 return <YourButton />;
}

  8. file structure will look like this:

    src
├── components
│   ├── button
│   │   ├── YourButton.js # your button component
│   │   ├── YourOtherButton.js
│   │   ├── ...
│   │   └── index.js # re-exporter for your button components
│   ├── other-component
│   │   ├── ...
│   └── index.js # we will import our components from this file
└── pages
    └── Page.js

Naming Conventions

In this project, we use PascalCase for naming our files and we use kebab-case for naming our folders.

Project Documents

References