Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tungphan2823/kindergarten-activity-tracking-application
Using the MERN stack (MongoDB, Express.js, React.js, Node.js). The application is designed to enhance the management of kindergarten operations by providing role-based dashboards for managers, caretakers, and parents.
https://github.com/tungphan2823/kindergarten-activity-tracking-application
expressjs mongodb mongoose nodejs reactjs tailwindcss typescript
Last synced: about 1 month ago
JSON representation
Using the MERN stack (MongoDB, Express.js, React.js, Node.js). The application is designed to enhance the management of kindergarten operations by providing role-based dashboards for managers, caretakers, and parents.
- Host: GitHub
- URL: https://github.com/tungphan2823/kindergarten-activity-tracking-application
- Owner: tungphan2823
- Created: 2024-12-09T22:59:49.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2024-12-09T23:36:26.000Z (about 1 month ago)
- Last Synced: 2024-12-10T00:27:42.163Z (about 1 month ago)
- Topics: expressjs, mongodb, mongoose, nodejs, reactjs, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://thesis-frontend-muvx.onrender.com/
- Size: 656 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🌟 **Overview**
This thesis focuses on developing a **Kindergarten Activity Tracking Web Application** using the **MERN stack** (MongoDB, Express.js, React.js, Node.js). The project aims to enhance the management of kindergarten activities by providing a secure and user-friendly platform for **managers**, **caretakers**, and **parents**. The application streamlines attendance tracking, communication, and administrative tasks while offering role-based access control for user groups.
---
## ✨ **Key Features**
- **Role-Based Dashboards**:
- **Managers**: Manage children’s records, assign caretakers, and organize groups.
- **Caretakers**: Track attendance and add daily comments on children’s activities.
- **Parents**: View their child’s attendance history and caretaker feedback.
- **Secure Authentication**:
- JWT-based authentication with access and refresh tokens.
- Role-based authorization to ensure data security.
- **Responsive Design**:
- Built with React.js and Tailwind CSS for a modern, mobile-friendly interface.
- **Efficient Data Management**:
- MongoDB Atlas for scalable NoSQL database storage.
- Well-defined relationships between users, children, groups, attendance records, and comments.
---
## 🛠️ **Technologies Used**
### Frontend
- React.js (with TypeScript)
- Tailwind CSS
- Redux Toolkit (state management)
- Axios (API requests)
- React Router DOM (routing)
### Backend
- Node.js (with TypeScript)
- Express.js
- JSON Web Tokens (JWT) for authentication
- Mongoose (MongoDB integration)
### Database
- MongoDB Atlas (NoSQL database)
---
## 🚀 **Getting Started**
Follow these steps to set up the project locally:
### Prerequisites
1. Install [Node.js](https://nodejs.org/) (v16+).
2. Set up a [MongoDB Atlas](https://www.mongodb.com/atlas/database) cluster or install MongoDB locally.
3. Install Git for version control.
---
### Setup
1. Clone the repository:
```bash
git clone [](https://github.com/tungphan2823/Kindergarten-Activity-Tracking-Application)
```
### Backend Setup
2. Install dependencies:
```bash
cd backend
npm install
```
3. Create a `.env` file in the root directory with the following variables:
```
MONGODB_URL=
ACCESS_TOKEN_SECRET=
REFRESH_TOKEN_SECRET=
```
4. Start the backend server:
```bash
npm run dev
```
5. The server will run on `http://localhost:3000`.
---
### Frontend Setup
2. Install dependencies:
```bash
cd frontend
npm install
```
3. Start the development server:
```bash
npm run dev
```
4. The client will run on `http://localhost:5173`.
---
## 📂 **Project Structure**
### Backend (`/backend`)
- `src/controllers`: Handles API business logic.
- `src/models`: Defines MongoDB schemas (Users, Children, Groups, etc.).
- `src/routes`: Manages API endpoints.
- `src/middleware`: Includes authentication and authorization logic.
### Frontend (`/frontend`)
- `src/pages`: Contains main views (e.g., dashboards for managers, caretakers, parents).
- `src/components`: Reusable UI components.
- `src/stores`: Manages global state using Redux Toolkit.
---
## **Overview Image**
## 🧪 **Testing**
The system includes test cases for core functionalities such as:
- Authentication and token validation.
- CRUD operations on users, children, and groups.
Testing is conducted using tools like Jest or Mocha to ensure reliability.
---
## 📈 **Future Enhancements**
1. Implement real-time notifications for parents.
2. Add detailed reporting features for attendance trends.
3. Introduce multi-language support to cater to diverse users.
---
## 🙏 **Acknowledgments**
This project was developed as part of a thesis at **Vaasan Ammattikorkeakoulu University of Applied Sciences**, under the guidance of **Dr. Ghodrat Moghadampour**. Special thanks to my family and friends for their unwavering support throughout this journey.
---