RecyThing - Website (Admin)

Table of Contents

• RecyThing - Website (Admin)

  • Table of Contents
  • Folder Structure
  • Tech Stack
  • Contributors
  • How To Export Your Modules (Re-exporting)
  • Naming Conventions
  • Project Documents
  • References

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:

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

• Figma
• Trello
• Software Requirement Specification

References

• React: JavaScript library for building user interfaces
• Vite: Development environment and bundler
• Chakra UI: UI component library
• Tailwind CSS: Utility-first CSS framework
• CKEditor: Rich text editor
• Redux Toolkit: Global state management
• React Router: Declarative routing for React
• React Hook Form: Efficient, flexible, and extensible forms
• Yup: Form validation
• Axios: Promise-based HTTP client
• Chart.js: Simple yet flexible JavaScript charting
• Framer Motion: Animation library for React
• Vercel: Deployment platform