TripTag Frontend Repository
This project is set up using Docker and npm/node for dependency management. Follow the instructions below to get it up and running on your local machine.
Prerequisites
Before you begin, ensure you have Docker installed on your system. You can download Docker from here.
Also, download Node.js (20.11.1) from here or preferably NVM. For a tutorial on NVM, refer to this guide.
Getting Started
-
Clone the repository to your local machine.
git clone <repository-url>
-
Navigate to the project directory.
cd <project-directory>
-
Download all necessary dependencies in the
package.json
file. It will create thenode_modules
directory andpackage-lock.json
file, which contain our libraries and packages.npm install
-
If you want to start the live-server locally (good practice, recommended), changes in the code will automatically be applied on the web http://localhost:5137.
npm run dev
-
The rest of the information will interest you only when you want to test the build version. Build the Docker container. This step will build our dockerized app as a build, so we will be able to see production.
docker-compose build
-
Once the build is complete, you can start the project by running:
docker-compose up
This command will start the React build server inside the Docker container. The server will listen on port 8080.
-
Open your web browser and go to http://localhost:8080 to view the project.
Working with the Project
-
To stop the Docker container, press
Ctrl+C
in the terminal where the container is running (or just start the container with the -d flag to run it in the background). -
If you make changes to the Dockerfile or the docker-compose.yml file, you'll need to rebuild the container:
docker-compose build
-
To remove the containers, networks, volumes, and images created by
up
, run:docker-compose down
Project Structure
The project is structured as follows:
├───nginx - contains nginx files
└───src - contains our main
functionality, our main focus
├───assets - contains all images, CSS files, fonts, everything that isn't code-related
│
└───styles - contains CSS files (custom Tailwind-created)
├───components - contains components created by features
├───context - contains all React context files that are used across multiple pages
├───data - contains all data-code files, JSON, env, etc.
├───features - contains all independent components
├───hooks - contains all custom hooks
├───layouts - contains layouts based on components; think of it as a small app or page
├───lib - contains all React library-related files
├───pages - contains ONLY single pages, used like a glue for all related features
├───services - contains all API integrations, etc.
└───utils - contains all utility functionality, a place to store pure functions
│
...(config files etc.)
- The
frontend
directory contains the React Vite project and app files. - The
docker-compose.yaml
andDockerfile
are used for containerization and running the project in Docker.
Notes
Take a look into (using technologies):
Thank you for using the TripTag Frontend Project. If you need additional information or help, DM me on the DC server (Jakub Cisoń).