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.

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