https://github.com/jmcaluyafuentes/ccf-dgroup-mngt
Display dgroup list with filter functionality according to life stages and/or satellites.
https://github.com/jmcaluyafuentes/ccf-dgroup-mngt
Last synced: about 2 months ago
JSON representation
Display dgroup list with filter functionality according to life stages and/or satellites.
- Host: GitHub
- URL: https://github.com/jmcaluyafuentes/ccf-dgroup-mngt
- Owner: jmcaluyafuentes
- Created: 2024-10-10T07:45:53.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-10-22T15:46:50.000Z (6 months ago)
- Last Synced: 2025-01-15T08:16:09.491Z (4 months ago)
- Language: JavaScript
- Homepage: https://ccf-dgroups.netlify.app/
- Size: 4.29 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# CCF DGroup Connect App
A single-page application that displays a list of DGroups in CCF Australia.
## Deployed App
Access the deployed App at https://ccf-dgroups.netlify.app/
## Github Repository
View the source code and project details on GitHub repository: https://github.com/jmcaluyafuentes/ccf-dgroup-mngt
## Features
1. Displays a list of DGroups, showing the DGroup name, life stage, and satellite name for each group.
2. The DGroups are sorted alphabetically by DGroup name for easy navigation.
3. Users can filter the list based on satellite and/or life stage, allowing them to view only the DGroups that may be of interest for joining.
4. Users can click on a DGroup to view its detailed information, providing a deeper insight into the group.
#### App screenshot of Home Page:
#### App screenshot of DGroup Page:
#### App screenshot in mobile screen:
When a user clicks on one of the DGroups in the list, the app transitions to a detailed view of the selected DGroup.
## Loading and Error Handling
The application uses loading and error states to inform users of the current status during data fetching.
### Loading State
A loading indicator is shown when the app is waiting for data:
### Error Handling
If an error occurs, such as network issues, an error message is displayed with the option to retry:
## Handling No Available DGroups
If there are no available DGroups that match the selected satellite and life stage, the application will display a friendly message to inform the user:
## Installation and Set Up Instructions
Follow these steps to get the project running on your local machine:
### 1. Prerequisites
Make sure you have the following installed:
- Node.js
- npm (Node Package Manager)
### 2. Clone the Repository
First, clone the repository to your local machine:
```
git clone https://github.com/jmcaluyafuentes/ccf-dgroup-mngt.git
```
Navigate to the project directory:
```
cd ccf-dgroup-mngt
```
### 3. Install Dependencies
Run the following command to install the required dependencies:
```
npm install
```
### 4. Running the Application
To start the development server, run:
```
npm run dev
```
This will launch the application at http://localhost:5173/ by default.
### 5. Running Tests
```
npm test
```
Note: Unit tests have not yet been implemented. The current focus is on finalizing and optimizing the folder structure for scalability. Once this is complete, unit tests will be added. Please check the repository for updates in the coming days.
## Tech Stack
- React: A JavaScript library for building user interfaces.
- Vite: A build tool that provides a faster and leaner development experience for modern web projects.
- JavaScript: The primary programming language used for application logic.
- CSS: For styling and layout of the application.
- Bulma: A modern CSS framework that provides ready-to-use components and a grid system that allows for quick styling and layout adjustments without needing extensive custom CSS.
- Axios: A promise-based HTTP client for making API requests.
- React Router: For handling routing and navigation within the application.