https://github.com/ozematt/travel_app_fullstack
Travel | Fullstack Application
https://github.com/ozematt/travel_app_fullstack
ci-cd docker expressjs jwt-auth nodejs postgresql prisma react react-hook-form react-testing-library taiwindcss typescrip vite vitest zod
Last synced: about 2 months ago
JSON representation
Travel | Fullstack Application
- Host: GitHub
- URL: https://github.com/ozematt/travel_app_fullstack
- Owner: ozematt
- Created: 2025-01-16T12:04:24.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-10T13:17:49.000Z (over 1 year ago)
- Last Synced: 2025-03-30T21:28:56.347Z (about 1 year ago)
- Topics: ci-cd, docker, expressjs, jwt-auth, nodejs, postgresql, prisma, react, react-hook-form, react-testing-library, taiwindcss, typescrip, vite, vitest, zod
- Language: TypeScript
- Homepage:
- Size: 2.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Travel
Welcome to my project **Travel**! 🎒✨ The project was created based on a free layout from Figma: [Travel UI Kit](https://www.figma.com/community/file/993910904620677970). The goal of this project was to practice working with **TailwindCSS** as well as integrating with modern frontend and backend tools.
## Features
- **Responsiveness**: The app adjusts to different screen sizes (mobile-first design).
- **Theme Switcher**: The ability to switch between light and dark themes.
- **User Management**: Adding and storing users in the database.
- **Form Validation**: Forms are created using **React Hook Form** and validated with **Zod**.
- **State Management**: **Context API** is used for global state management in the app.
## Screenshots
### Main View
### Main View - Mobile
### Registration Form
## Technology
The project was built using the following technologies:
### FRONTEND:
- **Vite**: A modern tool for building frontend applications.
- **TailwindCSS**: A modern CSS framework.
- **TypeScript**: Static typing for JavaScript.
- **React**: A library for building user interfaces.
- **React Router**: A tool for managing routing in a React application.
- **React Hook Form**: A tool for handling forms in React.
- **Zod**: A data validation library.
- **Vitest** and **React Testing Library**: Tools for unit testing.
### BACKEND:
- **Node.js/Express.js**: Platform and framework used for creating the server and backend logic.
- **Prisma ORM**: A tool for object-relational mapping and database management.
- **PostgreSQL**: A relational database used for storing data.
- **JWT (JSON Web Tokens)**: Technology used for user authentication.
- **bcryptjs**: A library for securely hashing user passwords before saving them in the database.
- **CORS**: Middleware enabling resource sharing between different domains.
- **Docker**: A containerization tool that allows easy deployment and management of the app in isolated environments.
The project is configured to run in Docker containers, ensuring smooth collaboration between the frontend and backend, and maintaining consistency across deployment environments.
### Installation
To install the project, follow the steps below:
1. **Clone the repository:**
Fork the repository to your GitHub account, then clone it locally.
```sh
git clone https://github.com/ozematt/Travel_app_fullstack.git
```
2. **Navigate to the project directory:**
```sh
cd Travel_app_fullstack
```
3. **Build and run the containers:**
Ensure Docker is installed and running. Then, run the following command.
```sh
docker-compose up --build
```
5. **Access the app:**
- **Frontend**: http://localhost:5173/
- **Backend**: http://localhost:5005/
## Summary
This project was created for learning and practicing working with modern frontend and backend technologies. Thank you for visiting the repository! 😊