series-tracker-v2
series-tracker-v2 copied to clipboard
The aim of the project is to facilitate the tracking of TV series, movies, and perhaps many other things in the future. I used to use Notion to keep track of what I've watched, but doing it manually w...
Tracker v2
The aim of the project is to facilitate the tracking of TV series, movies, and many other things in the future. I used to use Notion to keep track of what I've watched, but doing it manually was quite cumbersome. Although there were similar applications, they had their issues. They didn't suffice to meet my needs. So, I wanted to develop an application like this.
Basic Technologies Used
Client: Next.js, React, Typescript, Firebase, TailwindCSS, shadcn-ui, valibot, react-hook-form, react-csv, next-themes, next-intl,
Server: Next.js, next-firebase-auth-edge, Firebase Admin, tRPC
Lessons Learned
While preparing the project, I encountered many challenges. One of the biggest was likely the multi-language support. Setting up both user authentication and the multi-language middleware took 5 days. The user login/logout system and Firebase Admin setup were challenging.
Features
-
Real-time data changes with
Firebase
-
Full control over the profile with
firebase
(adding a profile picture, username, display name, changing password, changing email) -
Secure authentication with
next-firebase-auth-edge
-
Real-time messaging with Firebase
-
Built with
tailwindCSS
-
Accessible components with Shadcn-ui
-
Dark/light mode switch with
next-themes
-
icons with
react-icons
-
Responsive design
-
Type-safe API with
tRPC
-
Rate limiting
-
Multi-language support (tr, en, de) with
next-intl
-
Mail sender with
node-mailer
-
PWA export with
next-pwa
you can download like an Android or iOS app. -
Adding to favorites, rating, adding status
-
Pagination with
@tanstack/react-query
-
Table functionality with
@tanstack/react-table
-
Form validation with
react-hook-form
andvalibot
-
Data export with
react-csv
-
SEO support
-
Debouncing with
use-debounce
-
CI/CD with GitHub actions(every commit to preview or main branch automatically deploy new version to preview or production)
Screenshots
Optimization
Using next/dynamic
for import, server-side rendering (SSR), react-query, useMemo, memo
Frequently Asked Questions
Q1: Question 1
A1: Answer 1
Q2: Question 2
A2: Answer 2
Running on Your Computer
Clone the project:
git clone [email protected]:dukeofsoftware/series-tracker-v2.git
Navigate to the project directory:
cd series-tracker-v2
Install the necessary packages and add required values to the .env
file:
pnpm install
Run the server:
pnpm serve
Environment Variables
To run this project, you must add the following environment variables to your .env
file. You can find them in the .env.example
file. Also, all environment variables come with type safety @/env.mjs so you can't start the application without adding all of them.
ANALYZE=
false
Server Firebase
FIREBASE_PROJECT_ID=
FIREBASE_API_KEY=
FIREBASE_CLIENT_EMAIL=
FIREBASE_PRIVATE_KEY=
"-----BEGIN PRIVATE KEY-----
-----END PRIVATE KEY-----\n"
Client Firebase
NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_PROJECT_ID=
NEXT_PUBLIC_BUCKET=
NEXT_PUBLIC_MESSAGING_SENDER_ID=
NEXT_PUBLIC_APP_ID=
NEXT_PUBLIC_MEASUREMENT_ID=
NEXT_PUBLIC_FIREBASE_DATABASE_URL=
NEXT_PUBLIC_REDIRECT_URL=
USE_SECURE_COOKIES=
false // set true if https
API Keys
TMDB_TOKEN=
SITE_URL=
Related Projects
Here are some related projects:
Feedback
If you have any feedback, please contact us at [email protected].