Skip to content
Snippets Groups Projects
p1304125's avatar
Michał Pryba authored
2a786b48

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

  1. Clone the repository to your local machine.

    git clone <repository-url>
  2. Navigate to the project directory.

    cd <project-directory>
  3. Download all necessary dependencies in the package.json file. It will create the node_modules directory and package-lock.json file, which contain our libraries and packages.

    npm install
  4. 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
  5. 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
  6. 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.

  7. 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 and Dockerfile 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ń).