lemon-attendance

byalisha Sahoo

Create a mini project on attendance management system using mean stack make a responsive website and make it professional using angular 21 version and node 24 version

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document (SRD)

Project Name: Lemon-Attendance

1. Introduction

The Lemon-Attendance project is a professional, responsive attendance management system designed for employees and students. Built using the MEAN stack (MongoDB, Express.js, Angular 21, and Node.js 24), this system ensures scalability, modern performance, and ease of use. The system incorporates role-based access to cater to diverse user needs, such as administrators managing attendance and users viewing their records.

This document outlines the system requirements, user personas, and design concepts to guide the development of Lemon-Attendance. The project is tailored for Alisha Sahoo, based in India, and considers locale-specific defaults like IST (Indian Standard Time) for time-related functionalities.

Page 1 of 6

2. System Overview

Lemon-Attendance is a web-based application aimed at simplifying attendance management for organizations and educational institutions. The system provides:

  • Role-based access for administrators, employees, and students.
  • Attendance tracking with real-time updates.
  • User management for adding, editing, and removing users.
  • Attendance history for employees and students to view their records.
  • Responsive design to ensure usability across devices (desktop, tablet, mobile).

The system is designed to be intuitive, professional, and efficient, leveraging the MEAN stack for a seamless user experience.

3. Functional Requirements

  • As Admin, I should be able to manage users (add, edit, delete employees/students).
  • As Admin, I should be able to track attendance records for all users.
  • As Admin, I should be able to generate attendance reports.
  • As Employee/Student, I should be able to mark my attendance.
  • As Employee/Student, I should be able to view my attendance history.
  • As Employee/Student, I should receive notifications related to attendance.

4. User Personas

Page 2 of 6

4.1 Admin

  • Responsibilities: Manage users, track attendance, generate reports.
  • Access Level: Full access to all system features.

4.2 Employee

  • Responsibilities: Mark attendance, view attendance history, receive notifications.
  • Access Level: Limited to personal attendance data and notifications.

4.3 Student

  • Responsibilities: Mark attendance, view attendance history, receive notifications.
  • Access Level: Limited to personal attendance data and notifications.

5. Visuals Colors and Theme

Color Palette

The Lemon-Attendance project will use a vibrant yet professional color scheme to reflect its modern and efficient nature:

  • Background: #F4F8F7 (soft mint green for a refreshing look)
  • Surface: #FFFFFF (pure white for cards and modals)
  • Text: #2E2E2E (charcoal gray for readability)
  • Accent: #F7C948 (bright lemon yellow for highlights and buttons)
  • Muted Tones: #B0BEC5 (cool gray for secondary text and borders)
Page 3 of 6

6. Signature Design Concept

The Lemon-Attendance homepage will feature a vivid, interactive "Lemon Orchard" theme that blends functionality with a unique visual identity:

  • Hero Section: A large, animated lemon tree in the center of the page, with lemons representing key features (e.g., "Mark Attendance," "View Reports"). When users hover over a lemon, it "shakes" slightly and displays a tooltip with more details.
  • Interactive Navigation: The tree branches act as navigation paths, with smooth animations guiding users to different sections of the site.
  • Attendance Heatmap: A visually engaging heatmap displayed as a garden bed, where attendance trends are represented by the growth of plants (e.g., vibrant green for high attendance, wilted for low attendance).
  • Micro-Interactions: Buttons and icons will have subtle animations, such as a ripple effect when clicked or a glow when hovered over.
  • Responsive Animations: On mobile devices, the tree will simplify into a vertical layout, with lemons sliding into view as users scroll.

This design ensures the homepage is both functional and unforgettable, creating a delightful first impression for users.

Page 4 of 6

7. Non-Functional Requirements

  • Performance: The system should load within 3 seconds on a standard broadband connection.
  • Scalability: Support up to 10,000 concurrent users.
  • Security: Implement role-based access control and encrypt sensitive data.
  • Localization: Default to IST (Indian Standard Time) for all time-related functionalities.
  • Responsiveness: Ensure compatibility across desktop, tablet, and mobile devices.

8. Tech Stack

Frontend

  • Angular 21 for a modern, responsive user interface.

Backend

  • Node.js 24 for server-side logic.
  • Express.js for routing and middleware.

Database

  • MongoDB for flexible, document-based storage.
Page 5 of 6

Orchestration

  • Docker and Docker Compose for local development.

9. Assumptions and Constraints

  • Assumptions:

    • Users will have access to modern browsers (Chrome, Firefox, Edge).
    • The system will primarily be used in India, so IST will be the default timezone.
  • Constraints:

    • The system must be built using the MEAN stack.
    • The project must adhere to a professional design standard.

10. Glossary

  • Admin: A user with full access to manage the system.
  • Employee/Student: A user with limited access to mark and view attendance.
  • MEAN Stack: A technology stack comprising MongoDB, Express.js, Angular, and Node.js.
  • IST: Indian Standard Time, the timezone used in India.
  • Responsive Design: A design approach that ensures usability across various devices.
Page 6 of 6

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.