XMDb

The IMDb Clone app, powered by Prisma, tRPC, Next.js, Tailwindcss and TypeScript offers essential features such as user authentication, movie management, and social interactions like user following and post liking. You can see: Live Demo

Table of Contents

• XMDb
  • Features
  • RoadMap
  • Built With
    • Dependencies
    • Dev Dependencies
  • Installation & Usage
    • Prerequisites
    • Running Locally
    • Storybook
      • Run Storybook
    • Test
      • Run test
    • Commands
  • Project Structure
    • Project Folder Structure
    • Important files
  • Disclaimer
  • License

Features

This project setup will include following features.

• 🔑 Fully functional Sign In, Sign Up, and Forgot Password screens.
• 🧙‍♂️ Comprehensive account profile screens.
• 🎥 Capability to create and list movies.
• 🔎 Search functionality for users.
• 🔎 Ability to search movies created by users.
• 🗽 Implementation for users to follow each other.
• 💖 Post liking feature for logged-in users.
• 📊 Statistics for user follows.
• 📈 Statistics for post likes.
• 🚀 Blazing fast development server and build process.
• 🔗 The routing feature is thoughtfully designed to mimic the familiar and intuitive navigation patterns of IMDb.com.
• 🔥 Visually appealing and intuitive landing layout.
• 🌇 Incorporation of an interactive carousel image slider.
• ⭐️ Application-wide responsive design and navigation.
• 🎨 Storybook integration for effortless development of UI components.
• 🔐 Env var validation
• 🔧 Optimized developer experience with ESLint, Prettier, and Husky.
• 📌 Absolute import support with path aliases using @/ and ~/ prefix.
• 🤖 Conventional Commit, commitlint, and commitizen for ensuring adherence to commit standards.
• 📎 Vercel deployment configurations for seamless deployment.
• 📜 Recommendations for useful VSCode extensions, and settings configuration for optimal development.

RoadMap

• () The functionality should be added to the Forgot Password screen.
• () UI improvements for TMDB.

Built With

Dependencies

Package	Description
React	The library for web and native user interfaces
Next.js	The React Framework
tRPC	Move Fast and Break Nothing. End-to-end typesafe APIs made easy
Prisma	Next-generation Node.js and TypeScript ORM
next-auth	Authentication for the Web.
react-query	Powerful asynchronous state management, server-state utilities and data fetching for the web.
react-hook-form	React Hooks for form state management and validation (Web + React Native)
React Icons	Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using.
Zod	TypeScript-first schema validation with static type inference
zodios	typescript http client and server with zod validation
Day.js	Fast 2kB alternative to Moment.js with the same modern API
react-hot-toast	Lightweight, customizable Notifications for React.
superjson	Safely serialize JavaScript expressions to a superset of JSON, which includes Dates, BigInts, and more.
bcrypt	bcrypt for NodeJS
tailwind-merge	Merge Tailwind CSS classes without style conflicts
clsx	A tiny (228B) utility for constructing className strings conditionally.

Dev Dependencies

Package	Description
Vite	Next generation frontend tooling. It's fast!
Typescript	TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Storybook	Storybook is a frontend workshop for building UI components and pages in isolation.
Vitest	Next generation testing framework powered by Vite.
Husky	Git hook management
Conventional Commit	A specification for adding human and machine readable meaning to commit messages.
Commitlint	Lint commit messages
Commitizen	Using a standardized set of rules to write commits, makes commits easier to read, and enforces writing descriptive commits.
Lint Staged	Run linters against staged git files and don't let 💩 slip into your code base!
ESLint	A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
Prettier	An opinionated code formatter
wait-on	wait-on is a cross-platform command line utility and Node.js API which will wait for files, ports, sockets, and http(s) resources to become available

Installation & Usage

Prerequisites

• Runtime environment : Node.js >=18.4.0
• Package manager : npm >=9.x.x
• Database : PostgreSQL >=15.3

Running Locally

This application requires Node.js.

Clone the repository to your local machine.

git clone https://github.com/enesdir/xmdb.git
cd xmdb # Access the project directory.

Install dependencies by running npm install.

npm install

Set environment variables. Create a .env.local file in the root directory of the project and add the following variables:

cp .env.example .env.local

Start the development database server

docker-compose up

Start the development database server

npm run db:migrate

Start the development server by running

npm run dev

Storybook

Storybook is an Open Source tool to help you develop framework agnostic components in isolation and document them.

Run Storybook

npm run dev:storybook

Test

• vitest and testing-library/react for unit and integration tests

Run test

npm run test

Commands

Command	Description
npm run dev	Starts the server in dev mode
npm run lint	Runs ESLint on the project
npm run lint:fix	Runs Prettier on entire src folder
npm run prettier:verify	Runs Prettier-check and throws error if fails
npm run lint-staged	Runs Prettier on only staged (changed) files
npm run type-check	Runs TSC
npm run build	runs prisma generate + prisma migrate + next build
npm run start	Runs start production server
npm run test	runs normal Vitest unit tests
npm run dev:storybook	Runs storybook
npm run build:storybook	Build Static Storybook

Project Structure

Project Folder Structure

The following is the structured layout of the project directory, providing an overview of the organization of files and folders.

- root
  - .github/                # Contains GitHub-related files
  - .husky/                 # Configuration for Husky
  - .storybook/             # Customizations for Storybook
  - .vscode/                # VSCode settings
  - prisma/                 # Prisma DB schema
  - public/                 # Stores static assets and files served to the client
    - assets/               # Publicly accessible assets: images, fonts, etc.
  - src/                    # Source code for the application
    - app/                  # Next.js 14 app directory that houses the application routing
      - api/                # API Router
    - components/           # Reusable UI components used throughout the application
      - {ComponentName}/    # Houses reusable React components shared across the features
    - constants/            # General Config files
    - features/             # Functional modules or sections of the application
      - {featureName}/      # Contains a specific feature module with its components, actions, and views
        - types/            # TypeScript type definitions and interfaces specific to this feature
    - hooks/                # Custom React hooks used across the application
    - lib/                  # External libraries and third-party integrations
    - providers/            # Context, state, and dependency injection providers
    - server/               # Backend files
      - modules             # App's different tRPC-routers
        - {featureName}/    # Houses tRPC-routers for specific features
    - styles/               # Everything related to styling and theming
    - utils/                # Utility functions and helper modules
  .commitlintrc.cjs         # Commitlint Configuration file
  .env.example              # Example environment variables file
  .npmrc                    # npm configuration
  .nvmrc                    # Node version configuration
  .gitignore                # Git ignore file
  .eslintrc.cjs             # ESLint configuration
  .lintstagedrc.cjs         # lint-staged configuration
  docker-compose.yml        # Docker compose configuration
  knip.json                 # Knip configuration
  next.config.mjs           # Next.js configuration
  package.json              # Node package file
  tailwind.config.cjs       # Tailwind CSS configuration
  tsconfig.json             # TypeScript configuration
  turbo.json                # Turbo configuration
  vercel.json               # Vercel deployment configuration
  vitest.config.ts          # vitest configuration

Important files

Path	Description
./prisma/schema.prisma	Prisma DB schema
./src/app/api/trpc/[trpc].ts	tRPC response handler
./src/server/router.ts	App's different tRPC-routers
./src/app/api/auth/[...nextauth]/route.ts	next-auth handler
./src/server/auth.ts	NextAuth settings

Disclaimer

The Tailwind name and logos are trademarks of Tailwind Labs Inc. The Next.js and Vercel names and logos are trademarks of Vercel. The IMDb name is a trademark of imdb.com. The use of The Movie Database (TMDb) API is subject to the terms of TMDb's API Service Agreement. xmdb is an independent project and is not affiliated with or endorsed by Tailwind Labs Inc, Vercel, or imdb.com.

License

This project uses MIT license: License