Rin Minase's Anime Database

Introduction

This project uses Preact (Faster & Leaner React) with Vite and deployed to Netlify

Getting Started

Running the project

Installations Required:

• Node
• Yarn

1. Clone the project and copy the ENV template file to a new ENV file.

   git clone https://github.com/RinMinase/anidb.git
   cd anidb
   cp .env.example .env
   

2. Modify the created ENV file based on your Firebase configuration

3. Install the dependencies then run the project

   yarn install
   yarn start
   

4. Fire up your browser and go to localhost:3000

Building the project

Installations Required:

• Node
• Yarn

1. Fire up your terminal inside the project folder.

2. Build the project by running:

   yarn build
   

3. This should generate a dist/ folder inside the project folder.

Project Structure

.
├── public/                 # Public assets folder
├── dist/                   # Compiled production code
├── src/                    # Project source code
│   ├──<module-name>/
│   │   ├── <component>     # Module sub-components
│   │   └── index.tsx       # Module entry point
│   ├── common/             # Project-wide reusable code
│   │   ├── components/     # Common components
│   │   ├── pages/          # Common pages (404 / 500 pages)
│   │   ├── providers/      # Context provider components
│   │   └── index.ts        # Entry point for common imports
│   ├── main.tsx            # Main module
│   ├── routes.tsx          # Routes file
│   ├── service.ts          # Axios pre-setup
│   └── ...                 # Other source code files
├── .editorconfig           # IDE / Editor configuration
├── .env                    # Environment file
├── index.html              # Main HTML file (Vite bundler entry point)
├── tsconfig.json           # Source code TypeScript configuration file
├── tsconfig.node.json      # Vite TypeScript configuration file
└── ...                     # Other project files

Notes:

As to why the index.html file is located on the root of the project, refer to: https://vitejs.dev/guide/#index-html-and-project-root

Project tasks

Task automation is based on Yarn scripts or NPM scripts.

Task	Description
yarn dev	Run dev server on http://localhost:3000/
yarn preview	Run prod server on http://localhost:3000/
yarn build	Build production code to dist folder
yarn lint	Runs code linter manually
yarn cz	Commitizen commit formatter

Built with

• Preact - Web Framework
• TypeScript - Language syntax
• Vite - Source Code Bundler
• Emotion CSS - CSS pre-processor
• Material UI - Layouting Framework
• Netlify - Hosting Platform

Deployed to

• Netlify