{"id":28483052,"url":"https://github.com/prasukj7-arch/anime_website","last_synced_at":"2026-04-12T15:03:58.900Z","repository":{"id":295384957,"uuid":"989948880","full_name":"Prasukj7-arch/Anime_Website","owner":"Prasukj7-arch","description":"This website lets users search, browse, and manage their favorite anime. It displays anime details with cover images and titles, providing an easy and visually appealing way to explore and keep track of anime collections.","archived":false,"fork":false,"pushed_at":"2025-05-25T08:32:26.000Z","size":544,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-07T21:06:33.887Z","etag":null,"topics":["api-rest","bootstrap","css","database","ejs-templates","html","javascript","jikan-api","nodejs","postgresql"],"latest_commit_sha":null,"homepage":"","language":"EJS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Prasukj7-arch.png","metadata":{"files":{"readme":"README.markdown","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-25T07:15:16.000Z","updated_at":"2025-05-25T08:32:29.000Z","dependencies_parsed_at":"2025-05-25T09:39:45.149Z","dependency_job_id":null,"html_url":"https://github.com/Prasukj7-arch/Anime_Website","commit_stats":null,"previous_names":["prasukj7-arch/anime_website"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Prasukj7-arch/Anime_Website","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasukj7-arch%2FAnime_Website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasukj7-arch%2FAnime_Website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasukj7-arch%2FAnime_Website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasukj7-arch%2FAnime_Website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Prasukj7-arch","download_url":"https://codeload.github.com/Prasukj7-arch/Anime_Website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Prasukj7-arch%2FAnime_Website/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262468439,"owners_count":23316114,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api-rest","bootstrap","css","database","ejs-templates","html","javascript","jikan-api","nodejs","postgresql"],"created_at":"2025-06-07T21:06:23.716Z","updated_at":"2026-04-12T15:03:58.886Z","avatar_url":"https://github.com/Prasukj7-arch.png","language":"EJS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Anime Website\n\n## Overview\nAnime Website is a full-stack web application designed for anime enthusiasts to search, explore, and save their favorite anime. Built with a modern tech stack, the application integrates with the Jikan API (based on MyAnimeList) to fetch anime data and uses a PostgreSQL database to store user favorites. The website features user authentication, a dynamic anime search, detailed anime information, and a personalized favorites list, all wrapped in a responsive and user-friendly interface.\n\n**📖 Quick Links:**\n- [Quick Start Guide](QUICK_START.md) - Get started in 5 minutes\n- [Deployment Guide](DEPLOYMENT.md) - Deploy to production\n- [Contributing Guidelines](CONTRIBUTING.md) - How to contribute\n\n## Table of Contents\n- [Features](#features)\n- [Technologies Used](#technologies-used)\n- [Installation](#installation)\n- [Database Schema](#database-schema)\n- [Available Scripts](#available-scripts)\n- [API Routes](#api-routes)\n- [Usage](#usage)\n- [Project Structure](#project-structure)\n- [Deployment](#deployment)\n- [Screenshots](#screenshots)\n- [Future Features](#future-features)\n- [Security Considerations](#security-considerations)\n- [Troubleshooting](#troubleshooting)\n- [Acknowledgments](#acknowledgments)\n- [License](#license)\n- [Contact](#contact)\n\n## Features\n- **User Authentication**:\n  - Secure sign-up with password hashing using bcrypt.\n  - Login with session-based authentication via express-session.\n  - Google OAuth integration with Passport.js for social login.\n  - Logout functionality with session termination.\n- **Anime Listing**:\n  - Displays a list of anime fetched dynamically from the Jikan API.\n  - Features a carousel on the homepage highlighting the top 3 anime.\n- **Search Functionality**:\n  - Search bar for finding anime by name, with results fetched from the Jikan API.\n  - Search results rendered on a dedicated page.\n- **Anime Details Page**:\n  - Detailed view for each anime (accessible via `/anime/:id`), including synopsis, score, episodes, and more.\n- **Favorites Feature**:\n  - Logged-in users can add anime to their favorites, stored in a PostgreSQL database.\n  - Uses `users`, `favorites`, and `maps` tables to manage user-anime relationships.\n  - Users can view their personalized favorites list.\n- **Error Handling**:\n  - Custom error page for better user experience.\n  - Comprehensive error handling for all routes.\n\n## Technologies Used\n- **Backend**:\n  - **Node.js \u0026 Express.js**: Core backend framework for handling routes and API requests.\n  - **pg**: PostgreSQL client for database interactions.\n  - **bcrypt**: For secure password hashing.\n  - **express-session**: For session management and user authentication.\n  - **passport**: Authentication middleware for Node.js.\n  - **passport-google-oauth20**: Google OAuth 2.0 authentication strategy.\n  - **axios**: For making HTTP requests to the Jikan API.\n  - **body-parser**: For parsing request bodies.\n  - **dotenv**: For environment variable management.\n- **Frontend**:\n  - **EJS**: Templating engine for rendering dynamic HTML.\n  - **HTML5 \u0026 CSS3**: For structure and styling, including responsive design.\n- **API**:\n  - **Jikan API v4**: For fetching anime data (search, details, and listings).\n- **Database**:\n  - **PostgreSQL**: For storing users, favorites, and user-anime mappings.\n- **Version Control**: Git and GitHub for source code management.\n\n## Installation\nTo set up the Anime Website locally, follow these steps:\n\n1. **Clone the Repository**:\n   ```bash\n   git clone https://github.com/Prasukj7-arch/Anime_Website.git\n   cd Anime_Website\n   ```\n\n2. **Install Dependencies**:\n   ```bash\n   npm install\n   ```\n   This installs required Node.js packages (e.g., `express`, `pg`, `bcrypt`, `express-session`, `axios`, `ejs`, `passport`).\n\n3. **Set Up the PostgreSQL Database**:\n   - Install PostgreSQL and pgAdmin if not already installed.\n   - Create a database named `anime` in pgAdmin.\n   - Run the provided `database-schema.sql` file to create all required tables:\n     ```bash\n     psql -U your_username -d anime -f database-schema.sql\n     ```\n   - Or manually create the tables:\n     ```sql\n     CREATE TABLE users (\n         id SERIAL PRIMARY KEY,\n         email VARCHAR(255) UNIQUE NOT NULL,\n         password VARCHAR(255),\n         oauth_provider VARCHAR(50),\n         oauth_id VARCHAR(255),\n         display_name VARCHAR(255),\n         created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n     );\n\n     CREATE TABLE favorites (\n         id SERIAL PRIMARY KEY,\n         anime_id INTEGER NOT NULL UNIQUE,\n         title VARCHAR(255) NOT NULL,\n         image_url VARCHAR(255),\n         created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP\n     );\n\n     CREATE TABLE maps (\n         id SERIAL PRIMARY KEY,\n         user_id INTEGER NOT NULL,\n         anime_id INTEGER NOT NULL,\n         created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,\n         FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,\n         UNIQUE(user_id, anime_id)\n     );\n     ```\n\n4. **Configure Environment Variables**:\n   - Copy `.env.example` to `.env`:\n     ```bash\n     cp .env.example .env\n     ```\n   - Update the `.env` file with your configuration:\n     ```env\n     DB_USER=your_db_user\n     DB_PASSWORD=your_db_password\n     DB_DATABASE=anime\n     DB_HOST=localhost\n     DB_PORT=5432\n     PORT=3000\n     SESSION_SECRET=your-super-secret-session-key\n     # Optional: Google OAuth\n     GOOGLE_CLIENT_ID=\n     GOOGLE_CLIENT_SECRET=\n     GOOGLE_CALLBACK_URL=http://localhost:3000/auth/google/callback\n     ```\n   - Generate a secure session secret:\n     ```bash\n     node -e \"console.log(require('crypto').randomBytes(32).toString('hex'))\"\n     ```\n\n5. **Start the Server**:\n   ```bash\n   # Development mode (with auto-restart)\n   npm run dev\n   \n   # Or production mode\n   npm start\n   ```\n   - The application will run on `http://localhost:3000`\n\n## Database Schema\n\nThe application uses three main tables:\n\n**`users`** - Stores user account information\n- `id` (SERIAL Primary Key)\n- `email` (VARCHAR(255), Unique, NOT NULL)\n- `password` (VARCHAR(255), Hashed with bcrypt)\n- `oauth_provider` (VARCHAR(50), e.g., 'google')\n- `oauth_id` (VARCHAR(255), OAuth user ID)\n- `display_name` (VARCHAR(255), User's display name)\n- `created_at` (TIMESTAMP, Default: CURRENT_TIMESTAMP)\n\n**`favorites`** - Stores anime information\n- `anime_id` (INT, Primary Key - from Jikan API)\n- `title` (VARCHAR(255), Anime title)\n- `image_url` (TEXT, Anime cover image URL)\n\n**`maps`** - Maps users to their favorite anime\n- `user_id` (INT, Foreign Key → users.id)\n- `anime_id` (INT, Foreign Key → favorites.anime_id)\n- Composite Primary Key: (user_id, anime_id)\n\n## Available Scripts\n\n- **`npm start`** - Run the application in production mode\n- **`npm run dev`** - Run the application in development mode with auto-restart using nodemon\n- **`npm test`** - Run tests (not yet implemented)\n\n## API Routes\n\n### Public Routes\n- **`GET /`** - Landing page\n- **`GET /login`** - Login page\n- **`GET /signup`** - Signup page\n- **`GET /home`** - Main anime listing page with carousel\n- **`GET /search?search=\u003cquery\u003e`** - Search anime by name\n- **`GET /anime/:id`** - View detailed anime information\n\n### Authentication Routes\n- **`POST /signup`** - Create new user account\n- **`POST /login`** - Login with email/password\n- **`POST /logout`** - Logout and destroy session\n- **`GET /auth/google`** - Initiate Google OAuth login\n- **`GET /auth/google/callback`** - Google OAuth callback\n\n### Protected Routes (Require Login)\n- **`GET /favorites`** - View user's favorite anime\n- **`POST /add-to-favorites`** - Add anime to favorites\n\n## Usage\n- **Homepage**: Landing page with introduction to the website.\n- **Sign Up/Login**: Create an account with email/password or use Google OAuth to log in.\n- **Home Page**: View anime fetched from the Jikan API with a carousel highlighting the top 3.\n- **Search Anime**: Use the search bar to find anime by name; results are displayed on a dedicated search page.\n- **Anime Details**: Click on any anime to view detailed information including synopsis, score, episodes, and more.\n- **Favorites**: Add anime to your favorites list (requires login) and view your saved anime on the favorites page.\n- **Logout**: Securely log out and end your session.\n\n## Project Structure\n```\nAnime_Website/\n├── public/                    # Static files\n│   ├── images/               # Image assets\n│   └── styles/               # CSS stylesheets\n│       ├── style.css         # Global styles\n│       ├── home.css          # Home page styles\n│       ├── search.css        # Search page styles\n│       ├── favorite.css      # Favorites page styles\n│       ├── login.css         # Login page styles\n│       └── signup.css        # Signup page styles\n├── views/                     # EJS templates\n│   ├── index.ejs             # Landing page\n│   ├── login.ejs             # Login page\n│   ├── signup.ejs            # Sign-up page\n│   ├── home.ejs              # Main anime listing page with carousel\n│   ├── search.ejs            # Search results page\n│   ├── description.ejs       # Anime details page\n│   ├── favorites.ejs         # User favorites page\n│   └── error.ejs             # Error page\n├── .env                       # Environment variables (not in repo)\n├── .env.example               # Environment variables template\n├── .gitignore                 # Git ignore rules\n├── CONTRIBUTING.md            # Contributing guidelines\n├── database-schema.sql        # PostgreSQL database schema\n├── DEPLOYMENT.md              # Detailed deployment guide\n├── QUICK_START.md             # Quick start guide\n├── vercel.json                # Vercel deployment configuration\n├── index.js                   # Main Express application\n├── package.json               # Node.js dependencies and scripts\n├── package-lock.json          # Dependency lock file\n└── README.md                  # This file\n```\n\n## Deployment\n\nThis application is configured for deployment on **Vercel** with **Supabase** as the database.\n\n### Deployment Stack:\n- **Frontend/Backend**: Vercel (Free tier)\n- **Database**: Supabase PostgreSQL (Free tier)\n- **Configuration**: `vercel.json` included\n\n### Quick Deployment Steps:\n\n1. **Setup Supabase Database**:\n   - Create account at https://supabase.com\n   - Create new project\n   - Run `database-schema.sql` in SQL Editor\n   - Copy connection string\n\n2. **Deploy to Vercel**:\n   - Create account at https://vercel.com\n   - Connect GitHub repository\n   - Add environment variables (see below)\n   - Deploy!\n\n3. **Environment Variables for Vercel**:\n   ```\n   DATABASE_URL=\u003cyour-supabase-connection-string\u003e\n   SESSION_SECRET=\u003cgenerate-random-string\u003e\n   PORT=3000\n   NODE_ENV=production\n   ```\n\nFor detailed step-by-step instructions, see **[DEPLOYMENT.md](DEPLOYMENT.md)**.\n\n## Screenshots\n- **Homepage**: Displays a carousel with the top 3 anime and a search bar.\n- **Search Results**: Shows anime matching the search query.\n- **Anime Description**: Detailed view with synopsis, score, and episodes.\n- **Sign Up/Login**: Forms for user registration and authentication.\n- **Favorites List**: Personalized list of saved anime for logged-in users.\n\n*Note*: Screenshots can be added to the `public/images/` folder and linked here in the README.\n\n## Future Features\n- **Pagination**: Add pagination for search results and anime listings to improve performance.\n- **Watchlist/Reminder**: Allow users to create a watchlist or set reminders for upcoming anime episodes.\n- **User Profiles**: Enable users to customize profiles with avatars, bio, and viewing preferences.\n- **Admin Dashboard**: Create an admin interface for managing users and monitoring site activity.\n- **Reviews \u0026 Ratings**: Allow users to write reviews and rate anime.\n- **Social Features**: Add ability to follow other users and share favorites.\n- **Advanced Search**: Filter anime by genre, year, rating, and other criteria.\n- **Recommendations**: AI-powered anime recommendations based on user preferences.\n\n## Security Considerations\n\n- **Password Hashing**: All passwords are hashed using bcrypt with salt rounds of 10\n- **Session Management**: Secure session-based authentication with express-session\n- **Environment Variables**: Sensitive data stored in `.env` file (not committed to repository)\n- **SQL Injection Protection**: Parameterized queries using pg library\n- **OAuth Integration**: Secure Google OAuth 2.0 implementation\n- **CSRF Protection**: Consider adding CSRF tokens for production (future enhancement)\n\n## Troubleshooting\n\n### Common Issues\n\n**Database Connection Error**\n- Verify PostgreSQL is running\n- Check database credentials in `.env`\n- Ensure database `anime` exists\n\n**Session/Login Issues**\n- Verify `SESSION_SECRET` is set in `.env`\n- Clear browser cookies and try again\n\n**Google OAuth Not Working**\n- Check `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` are correct\n- Verify callback URL matches in Google Cloud Console\n- Ensure OAuth credentials are for the correct environment (localhost vs production)\n\n**Jikan API Rate Limiting**\n- The Jikan API has rate limits (3 requests/second, 60 requests/minute)\n- Add delays between requests if needed\n- Consider implementing caching for frequently accessed data\n\n## Acknowledgments\n- **Jikan API**: For providing comprehensive anime data from MyAnimeList\n- **PostgreSQL**: For reliable database management\n- **EJS**: For efficient server-side templating\n- **Node.js \u0026 Express**: For powering the backend\n- **Passport.js**: For authentication middleware\n- **bcrypt**: For secure password hashing\n\n## License\nThis project is licensed under the ISC License.\n\n**⭐ If you find this project useful, please consider giving it a star on GitHub!**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprasukj7-arch%2Fanime_website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprasukj7-arch%2Fanime_website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprasukj7-arch%2Fanime_website/lists"}