This repository contains the source code for the neoClan website, which is deployed at http://neoclan.climbingclan.com. neoClan is a modern attendance management and check-in system designed for real-time tracking and management of events.
The website is built using React, a popular JavaScript library for building user interfaces. The project structure is organized to facilitate easy navigation and maintenance. Key directories and files include:
src/App.js
: The main application component that handles routing and layout.src/pages/
: Contains individual page components such asContribute.js
,Download.js
,Features.js
, andneoClan.js
.src/index.js
: The entry point of the application where the root component is rendered.public/
: Static files including images, icons, and the main HTML template.
This file defines the main application component. It uses React Router for navigation and includes a container for the main content. The App
component manages the current location state and handles tab changes.
- Contribute.js: Provides information on how to contribute to the project.
- Download.js: Guides users on how to download and install neoClan.
- Features.js: Highlights the main features of neoClan.
- neoClan.js: The main landing page with a header, hero image, and introductory text.
This is the entry point of the application where the App
component is rendered into the DOM.
Contains static assets such as images, icons, and the main HTML template (index.html
).
The Header
component is located in src/components/Header.js
. It includes navigation tabs that allow users to switch between different sections of the application. The Header
component uses the Tabs
component from Mantine to manage the navigation state.
The Footer
component is located in src/components/Footer.js
. It typically contains links to important sections of the website, such as the home page, features, download, and contribute pages. The Footer
component uses the Group
component from Mantine to organize the links and provide spacing between them.
The Header
component is located in src/components/Header.js
. It includes navigation tabs that allow users to switch between different sections of the application. The Header
component uses the Tabs
component from Mantine to manage the navigation state.
The Footer
component is located in src/components/Footer.js
. It typically contains links to important sections of the website, such as the home page, features, download, and contribute pages. The Footer
component uses the Group
component from Mantine to organize the links and provide spacing between them.
To set up the project locally, follow these steps:
-
Clone the repository:
git clone https://github.com/tdobson/neoClan.git
-
Navigate to the project directory:
cd neoClan
-
Install dependencies:
npm install
In the project directory, you can run the following scripts:
Runs the app in development mode. Open http://localhost:3000 to view it in your browser. The page will reload if you make edits.
Launches the test runner in interactive watch mode. See the section about running tests for more information.
Builds the app for production to the build
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.
The project uses Jest along with React Testing Library for testing. Tests are located in the src/App.test.js
file. To run the tests, use the following command:
npm test
This will launch the test runner in interactive watch mode. For more information on how to write tests, refer to the React Testing Library documentation.
This file defines the main application component. It uses React Router for navigation and includes a container for the main content. The App
component manages the current location state and handles tab changes.
- Contribute.js: Provides information on how to contribute to the project.
- Download.js: Guides users on how to download and install neoClan.
- Features.js: Highlights the main features of neoClan.
- neoClan.js: The main landing page with a header, hero image, and introductory text.
This is the entry point of the application where the App
component is rendered into the DOM.
Contains static assets such as images, icons, and the main HTML template (index.html
).
For deployment instructions, refer to the section about deployment.