Hush is a web application developed using React, Next.js, and TypeScript, featuring a modern, dark-themed user interface styled with Tailwind CSS and ShadCN components. It employs Drizzle ORM for seamless PostgreSQL database interactions and integrates Auth.js for secure authentication. Real-time notifications are managed through Knock, while Cloudflare handles image hosting. The application is containerized using Docker for consistent deployment across environments.
Hush utilizes a modern set of technologies to deliver a smooth and efficient development experience. Below are the main tools and frameworks used:
- React: A popular JavaScript library for building user interfaces.
- Next.js: A React framework for building static and server-rendered applications with easy routing and server-side rendering.
- Tailwind CSS: A utility-first CSS framework for fast, responsive, and modern design.
- ShadCN: A UI component library to help you build accessible and customizable user interfaces quickly.
- TypeScript: A superset of JavaScript that adds static types, improving code quality and maintainability.
- Node.js: A runtime for executing JavaScript code server-side.
- PostgreSQL: A powerful, open-source relational database for storing structured data.
- Drizzle ORM: A lightweight ORM for interacting with the PostgreSQL database in a type-safe manner.
- Auth.js: A modern authentication library that integrates with various identity providers to handle authentication seamlessly.
- Knock: A real-time notification service for sending notifications to users.
- Cloudflare: A global CDN and security service, also used here for hosting images, providing fast access and security.
- Docker: A platform for developing, shipping, and running applications in containers, ensuring consistency across environments.
Follow the steps below to set up the project on your local machine for development:
- Ensure you have Node.js installed.
- Install Docker Desktop if you don't have it yet.
-
Install dependencies:
npm install
-
Create a
.envfile:- You’ll need to create a
.envfile for the project configuration. Message me for the required environment variables.
- You’ll need to create a
-
Configure Docker:
- Make sure Docker Desktop is running.
- In Docker Desktop, go to the Volumes section and stop any unnecessary programs that are consuming resources.
-
Start Docker containers:
- Open a terminal in the root project folder and run the following command:
docker-compose up
- This will create and start the necessary Docker containers for the project.
- Open a terminal in the root project folder and run the following command:
-
Push schema updates:
- In the
schema.tsfile, run the following command in the console to apply schema changes:drizzle-kit push --config=drizzle.config.ts
- (This step might not always be necessary, but it's good to run it if you're unsure.)
- In the
-
Fix missing npm dependencies:
- If you see any npm dependencies underlined with red squiggly lines, manually install them. If you're not sure which packages are missing, feel free to ask me.
-
Start the development server:
- Run the following command to start the development server:
npm run dev
- Run the following command to start the development server:
- If you encounter any issues during the setup, feel free to message me. Alternatively, you can try to debug the problem by referring to the error messages, and if needed, ask GPT or other resources for solutions.