Skip to content

Latest commit

 

History

History
126 lines (93 loc) · 4.06 KB

README.md

File metadata and controls

126 lines (93 loc) · 4.06 KB

Netlify Status

Recomfy

Brain.js example with platform for discovering movies, books, and series, inspired by Spotify. Browse, save favorites, and explore personalized recommendations tailored to your tastes.

Capture d’écran du 2024-12-12 19-22-47

Capture d’écran du 2024-12-12 19-24-10

Capture d’écran du 2024-12-12 19-22-59

Capture d’écran du 2024-12-12 19-23-07

Features

  • 🎬 Browse movies, TV shows, and books in one place
  • 🎯 Get personalized recommendations based on your preferences
  • 📚 Track your watchlist and reading list
  • ⭐ Rate and review content
  • 📱 Responsive design for all devices
  • 🎨 Beautiful, modern UI with dark mode
  • 🔍 Advanced search and filtering
  • 📊 View your watching/reading history and stats

Tech Stack

  • Frontend Framework: React with TypeScript
  • Styling: Tailwind CSS
  • State Management: React Context + Hooks
  • Routing: React Router
  • API Integration: Axios
  • Machine Learning: brain.js for recommendations
  • Build Tool: Vite
  • Package Manager: yarn
  • Typesafe API: tRPC

Getting Started

Prerequisites

  • Node.js (v14 or higher)
  • npm (v7 or higher)

Installation

  1. Clone the repository:
git clone https://github.com/alexrosepizant/recomfy.git
cd recomfy
  1. Install dependencies:
yarn install
  1. Create a .env file in the root directory and add your API keys:
VITE_TMDB_API_KEY=your_tmdb_api_key_here
VITE_GOODREADS_API_KEY=your_goodreads_api_key_here
  1. Start the development server:
yarn run dev

Environment Variables

Variable Description
VITE_TMDB_API_KEY API key for The Movie Database (TMDB)
VITE_GOODREADS_API_KEY API key for Goodreads

Project Structure

src/
├── components/        # React components
│   ├── browse/       # Browse-related components
│   ├── filters/      # Filter components
│   ├── layout/       # Layout components
│   ├── media/        # Media-related components
│   ├── search/       # Search components
│   └── ui/           # Reusable UI components
├── contexts/         # React contexts
├── hooks/            # Custom React hooks
├── services/         # API and service integrations
├── types/           # TypeScript type definitions
└── utils/           # Utility functions

Best Practices

  • Component Organization: Components are organized by feature/domain
  • Type Safety: TypeScript is used throughout the project
  • Code Splitting: Components and utilities are modular
  • State Management: Context API for global state
  • Error Handling: Comprehensive error handling and user feedback
  • Performance: Optimized with lazy loading and memoization
  • Accessibility: ARIA labels and semantic HTML
  • Testing: Unit tests for critical functionality

Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments