Rin Minase's Anime Database

Introduction

Add info here

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.

Code Scaffolding

This is using yarn ng generate <schematic> <name> command. This can be shortened to yarn ng g <schematic> <name>.

Schematics

• component or c - Creates a new component
• module or m - Creates a new NgModule
• service or s - Creates a new service

Project Structure

.
├── .circleci/                          # Circle CI configuration folder
├── assets/                             # Project assets
│   ├── config/                         # Project configurations
│   │   ├── manifest.json               # Web manifest file
│   │   ├── ngsw-config.json            # PWA Service Worker configuration file
│   │   ├── webpack.ts                  # Extended webpack configuration file
│   │   └── ...                         # Other configuration files
│   ├── res/                            # Platform-specific resources folder
│   └── ...                             # Other assets
├── dist/                               # Compiled production code
├── src/                                # Project source code
│   ├──<module-name>/                   # Project module
│   │   ├── <name>.component.html       # Component template
│   │   ├── <name>.component.scss       # Component stylesheet
│   │   ├── <name>.component.ts         # Module component
│   │   └── <name>.module.ts            # Module
│   ├── core/                           # Project-wide reusable classes
│   │   ├── builders/                   # Project builders
│   │   ├── components/                 # Project components
│   │   └── services/                   # Project services
│   ├── app.module.ts                   # Main module and project routes
│   ├── index.html                      # Main HTML file
│   ├── index.scss                      # Main Stylesheet (SCSS) file
│   └── index.ts                        # Main TypeScript file
├── .editorconfig                       # IDE / Editor configuration
├── .env                                # Environment file
├── angular.json                        # Angular CLI configuration
├── tsconfig.json                       # Main TypeScript configuration file
└── ...                                 # Other project files

Project tasks

Task automation is based on Yarn scripts or NPM scripts.

Task	Description
yarn start	Run development server on http://localhost:3000/ with file watching on changes
yarn start --prod	Run production server on http://localhost:3000/ with file watching on changes
yarn build	Build production code and add service worker to built code

Other tasks included in package.json that should not be executed manually:

Task	Description
yarn deploy	Build production code without displaying progress and add service worker to built code

Testing the project

Add info here

Built with

• Angular - Web Framework
• TypeScript - Language syntax
• Sassy CSS (SCSS) - CSS pre-processor
• Bootstrap 5 - HTML Framework (layout)
• Firebase - Database
• Webpack - Project bundler
• Circle CI - Continuous Integration (CI) service
• Netlify - Hosting Platform

Deployed to

• Netlify