This is a Next.js project designed to manage and display "Things" in a structured and interactive way. The application is built with modern web technologies and optimized for performance, accessibility, and scalability.
The Things app is a personal tracker and rating system for all the things you do, watch, read, play, listen to, and so on.
It's a work in progress, but it's live here: https://things-3.vercel.app
Track anything. Kind of like Goodreads but for everything. See what you've done, what you're currently doing, and what you want to do. Track how many times you've watched a movie, read a book, played a game, and so forth.
Rate anything. See your favorite things across different categories. View all of your favorite things in fun, engaging ways.
Discover new things in all-kindsa ways. Get recommondations on books you might like based on movies you've seen. Find new podcasts based on the video games you play. See what your friends are into. Find things by genre, tags, language, country, decade, and whatnot.
Add anything just by typing a name. Then add ratings, indicate your status, add a review, add notes and tags, and more.
Currently supported things with search results include books, movies, TV shows and video games. If you add a thing that is a supported type, see search results and select the thing you want to track. When you add a thing that supports search results, you can see the cover art, description, related people, and more.
Search results coming soon for podcasts, bands, albums, songs, board and card games, actors and stand-up comics, athletes and teams, and comic books.
I designed and developed the backend to support adding search results for new types of things in the future. The backend also normalizes any data needed by the frontend, so client apps aren't affected by the addition of new types. We can always add "unsupported" things (without search results).
- Dynamic Grid and Table Views: Display "Things" in responsive grids and tables.
- Authentication: Secure user authentication and session management using Auth0.
- Responsive Design: Fully responsive layouts for mobile, tablet, and desktop.
- Custom Animations: Smooth animations using Tailwind CSS and custom keyframes.
- TypeScript Support: Strongly typed codebase for better developer experience.
- Vercel Deployment: Optimized for deployment on Vercel.
- Framework: Next.js (App Router) with with TypeScript
- Styling: Tailwind CSS
- UI Components:
- Custom components and design system
- Some components built with Radix UI
- TanStack Table
- A few simple charts built with Recharts
- State Management: Simple state managed with custom hooks
- Search and Caching:
- APIs: The app integrates with third-party APIs to fetch data for supported "Thing" types (e.g., books, movies, TV shows, and video games). These APIs provide metadata such as descriptions, cover art, and related information.
- Backend Caching: API responses are cached using server-side caching strategies to improve performance and reduce redundant API calls. This ensures faster load times and minimizes API rate limits. Results are also cached in the database with a longer TTL.
- Client-side Caching: uses TanStack React Query for efficient client-side data fetching and caching.
- Database CRUD:
- Utilities:
- Media Management
- Icons as react components to support dynamic styling
- Images optimized using Next.js
- Testing:
- Jest for unit testing
- @testing-library/react for component testing
- Cypress for end-to-end testing
- Deployment: Vercel
- Thing documents contain minimial information, inclding information about the user that saved the thing, their rating and experience, and a reference to the Detail document stored in the Details collection.
- Detail documents contain the information fetched from a third-party API. When a user saves a Thing that hasn't been saved by other users yet, the thing's Details are stored and referenced in the Thing. When saving a Thing that other users have already saved, the Details already exist and are referenced in the Thing. When viewing Things, mongoose aggregates relevant Details to each Thing. Detail data is normalized. Detail data has a TTL to periodically refetch data from third-parties.
- Search documents store cached search results, so if multiple users search for the same term, we don't have to send requests to third-party APIs. Search results cached in the database have a relatively short TTL.
Ensure you have the following installed:
-
Clone the repository:
git clone https://github.com/your-username/things-3.git cd things-3 -
Install dependencies:
npm install # or yarn install # or pnpm install
Start the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 in your browser to view the app.
Create a .env.local file in the root of your project and add the following environment variables:
NEXT_PUBLIC_AUTH0_DOMAIN=your-auth0-domain
NEXT_PUBLIC_AUTH0_CLIENT_ID=your-auth0-client-id
NEXT_PUBLIC_AUTH0_REDIRECT_URI=http://localhost:3000Replace the placeholders with your Auth0 credentials.
.
├── app/ # Next.js app directory
├── components/ # Reusable React components
│ ├── nav/ # Navigation components
│ ├── things/ # Components for displaying "Things"
│ └── loading/ # Loading animations
├── lib/ # Utility libraries (e.g., Auth0 integration)
├── public/ # Static assets
├── styles/ # Global and component-specific styles
├── types/ # TypeScript type definitions
├── .eslintrc.js # ESLint configuration
├── tailwind.config.mjs # Tailwind CSS configuration
└── README.md # Project documentation
npm run dev: Start the development server.npm run build: Build the application for production.npm run start: Start the production server.npm run lint: Run ESLint to check for code issues.
This project is optimized for deployment on Vercel. To deploy:
- Push your code to a GitHub repository.
- Connect the repository to Vercel.
- Set up the required environment variables in the Vercel dashboard.
- Deploy your application.
Contributions are welcome! To contribute:
- Fork the repository.
- Create a new branch:
git checkout -b feature/your-feature-name
- Commit your changes:
git commit -m "Add your message here" - Push to your branch:
git push origin feature/your-feature-name
- Open a pull request.
This project is licensed under the MIT License.
Auth0 for user management, authentication (login/logout), session management and authorization for protected pages and API routes.
To minimize how many request users make to third-party APIs, I cache search results:
In my database, with a long-ish TTL Using in-memory cache on the server, with a medium-ish TTL. I'll replace this in-memory cache with Redis soon. Pretty excited about that :) In the client app/browser, facilitated by TanStack React-Query ... and to minimize requests to my own database, I cache user and community data as needed, using the same strategy described for search results above.
Logging using Winston in both the frontend and backend, including a transport to send logs to a Loggly cloud instance for centralized logging (e.g. follow a user's request from button click to DB and back).
Scalable error handling with custom error classes and middleware to catch and handle errors in a consistent way. Also added a custom error boundary with fallback UI to handle uncaught errors in the frontend.
- Community tags shared by all users (e.g. Nostalgia, Chill, Background, Dance, Workout)
- User-defined tags for personal use (e.g. "Songs Kyle Might Like" or "Rom-Coms for Pat")
- Enables virtual lists
- Facilitates discovery & organization
- Manually curated, sorted lists, like playlists
- Shareable, public or private
- If public, other users can "like" the list
- Top 10 Scary Movies Right Now
- Recently Added Podcasts
- Most Added Fiction Books Last Month
- Highest Rated Racing Video Games...
- Most rewatched TV Shows
- Probably include some cute li'l charts and graphs
- Will have a cron job that refreshes stats by periodically running queries
- Image gallery for things with multiple images
- Visualization (charts and graphs). Your things by decade, by type, by number of times repeating, by when you first experienced them... Community wide charts and graphs, too.
- People engine (find works and collaborations by people)
- Social features. Find, follow and connect with people with similar interests. See a user's things (if they made their profile public).
- News feeds related to your things, popular things, new things...
- Export my things to CSV (already working) or to pretty formatted PDFs (or images). Make visually appealing displays of your things to share, frame, gift...
- Feedback mechanism to encourage the user community to help decide what features to add or improve next.
- Discovery features. If you like that TV Show, you might like this book and that podcast. People involved in this also worked on that. Other people who like this also like these. Explore things by genre, tags, language, country, decade, etc.
- Distraction mode. Scroll through new things, popular things, things from the 90s...
- iOS app and widget.
I'm planning to integrate AI into the app to provide smarter, more personalized recommendations. By leveraging machine learning models, the app will analyze user preferences, ratings, and activity to suggest new "Things" you might enjoy. For example:
- Cross-Media Recommendations: Suggest books based on movies you've rated highly, or podcasts based on your favorite video games.
- Collaborative Filtering: Use data from other users with similar tastes to recommend new "Things" you might not have discovered otherwise.
- Natural Language Processing: Analyze reviews, tags, and descriptions to find patterns and suggest related content.
- Trend Analysis: Highlight trending "Things" in the community or within specific categories, such as "Most Added Fiction Books This Month" or "Top-Rated TV Shows of the Year."
These AI-driven features will enhance discovery, making it easier to find new favorites across all categories.
- Import things from other services, such as Goodreads. Connect your existing trackers, such as Goodreads, to sync your ratings and lists/shelves.
- Android app.
- Browser plugins.
- API for other developers to build on top of.
- Integration with other services, such as Spotify, Letterboxd, Steam, and so on.
- Machine learning to make recommendations.
- Voice commands.