OpenMaze website

This project was built with Vite and Tailwind CSS.

Table of Contents

Expand table of contents

• Table of Contents
• Design
• Deployment & testing
  • System status:
  • Build outputs
• Version control
• Getting started
• Directory structure
  • public
  • src
  • src/assets
  • src/blocks
  • src/components
  • src/core
  • src/pages
  • src/styles
• Available Scripts
  • npm install
  • npm run dev
  • npm run build
• Learn more

Design

The latest version of the design prototype is available via this Figma link

Deployment & testing

System status:

Build outputs

Branch	Build URL
main	openmaze.io
staging	staging.openmaze.io

Version control

You need to version the project to ensure cache is automatically renewed for end users. Commit your changes like you normally do, but before pushing run one of the following commands depending on your changes:

• npm version patch for releases with only bug fixes;
• npm version minor for releases with new features with or without bug fixes
• npm version major for major releases or breaking features

Next run git push origin development --tags to push all created tags to the repository.

Getting started

1. Install NodeJS on your system
2. Make sure Husky is installed globally. If not already, run npm install -g husky
3. Run the following commands in the terminal:

git clone https://github.com/Open-Maze/website.git`
npm install
npm run dev

4. Open http://localhost:5173 to view it in the browser.

Directory structure

public

This directory holds all static file as well as some app icons, favicon and the app's manifest. You probably never have to edit these files.
Only edit the index.html file to load external stylesheets.

src

This directory holds the main.jsx file which initializes all top-level components and renders them to the index.html file when building.\

src/assets

This directory holds all fonts and local images used by the OpenMaze website. Most images are imported from the OpenMaze API.

src/blocks

All importable blocks are stored in this directory. These blocks are used to build the website's pages.

src/components

All reusable components are stored in this directory. Each component has its own subfolder containing a .jsx file for the component itself, and a .css file for styling rules specific to this component.

src/core

All .jsx files in this directory form the logic needed for the website to work properly. Page routing and API requests are initialized in here.

src/pages

This directory holds all pages or views of the OpenMaze website.

src/styles

Only global stylesheets are located in this directory. Most styling is done through Tailwind CSS classes. But Tailwind CSS utility classes are initialized in these files.

Available Scripts

In the project directory, you can run:

npm install

Installs the dependencies needed for this project.

npm run dev

Runs the app in the development mode.
Open http://localhost:5173 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
OpenMaze website is ready to be deployed!

See the section about deployment for more information.

Learn more

To learn React, check out the React documentation or follow this Udemy course.