ChemClicks

ChemClicks: An Interactive Educational Chemistry Website

Table of Contents

• About The Project
  • Built With
  • Contributors
  • Entity-Relationship Diagram (ERD)
• Getting Started
  • Installation
• Deployment
• Testing
• User Interface
• License

About The Project

Code Blue has been tasked with creating a web application designed to facilitate learning of core high school chemistry concepts by serving as an interactive, dynamic, and autonomous learning tool. The focus is to encourage high school students to learn through interactivity rather than rote memorization. This website will house the unique curriculum of our client and will be designed with our client's students in mind.

This project is being undertaken by the development team Code Blue, composed of undergraduate students majoring in Computer Science at California State University, Sacramento. Its members consist of Anthony Dominguez, Danica Galang, Oliver Jezildzic, Isabel Santoyo-Garcia, Marilyn Sarabia, Maria Valencia, Jessica Villanueva, and Zhenkang Zhao.

(back to top)

Built With

We are building this project using the following:

• React - Frontend framework
• Vercel – Frontend hosting and deployment
• Node.js - Server-side runtime environment
• MongoDB - Database
• Django - Backend web framework
• Render – Backend deployment platform
• HTML - Markup language
• CSS - Styling language
• JavaScript - Programming language for frontend
• Python - Backend programming language

(back to top)

Contributors

Contact Us!

Anthony Dominguez - Email: anthonyd24uc@gmail.com
Danica Galang - Email: danica.k.galang@gmail.com
Oliver Jezildzic - Email: olijez55@gmail.com
Isabel Santoyo-Garcia - Email: isabelsantoyogarcia28@gmail.com
Marilyn Sarabia - Email: mkdso0527@gmail.com
Maria Valencia - Email: mariasworkspace1@gmail.com
Jessica Villanueva - Email: jessvanillaa@gmail.com
Zhenkang Zhao - Email: zhenkang209@gmail.com

(back to top)

Entity-Relationship Diagram (ERD)

Below is the Entity-Relationship Diagram (ERD) for our project. This diagram represents the relationships between key entities in our database:

Explanation

• User: Stores basic student information, including a unique user_id, school_email, hashed password.
• Teacher_User: Stores information about an administrator, including a unique teacher_id.
• Lesson_Progress: Tracks a student's progress per lesson with key information and statistics.
• Teacher_Lesson_Progress: Separates teacher progress from student progress for each lesson. This is used if the teacher wants to demonstrate a lesson.
• Lesson_Details: Stores the admin's settings and preferences for each lesson, including due_date and goal_level indicating how many questions a student must get right in order to pass to the next lesson.
• Announcement: Stores admin's anouncements to users on the website in message. The post_number attribute ensure the most recent announcement appears at the top.

(back to top)

Getting Started

To clone and run this application, you will need Node.js installed on your computer. You will also need Python.

Versions:

• Python 3.8.x+
• Node.js v20.x+
• npm 10.x+

Installation

1. Clone the repo & change directories

   git clone https://github.com/isg28/ChemClick.git

2. Initial Setup
   • Change directories into the ChemClick folder

     cd ChemClick

   • Install dependencies

     npm install

3. Setup Backend
   • Change directories into the backend folder

     cd backend

   • Ensure environment variables are set up correctly
     • Rename .env.example to .env and fill in the required values.
4. Install Python Dependencies
   • While in the backend/ folder, install all required Python packages listed in requirements.txt:

   pip install -r requirements.txt

Running the Application Locally

To launch the full application, you must run both the backend and frontend servers simultaneously in two separate terminal windows or tabs:

1. Run the Django Backend Server
   From inside the backend/ folder:

   python manage.py runserver

2. Run the React Frontend Server
   From inside the frontend/ folder:

   npm start

This setup ensures both the backend API and frontend UI are running and communicating properly for local development.

(back to top)

Deployment

• Backend: Hosted on Render, a cloud platform that automatically builds and deploys web services. The backend uses Gunicorn as the WSGI server to serve the Django application.
  

  Deployment logs confirming successful server boot on Render.

• Database: Integrated with MongoDB Atlas, a cloud-based NoSQL database. Environment variables were used to securely manage connection strings and credentials.
• Frontend: Deployed using Vercel, a frontend hosting platform optimized for React applications. It handles continuous deployment from GitHub and automatically builds the project on each push.

The live application is accessible at: 🎉 https://chem-clicks.vercel.app 🎉

(back to top)

Running Tests

Frontend Unit Testing (Jest)

This project uses Jest and React Testing Library for unit testing. Jest should have already been installed when dependencies were installed for the project. Follow these steps to run tests:

• Navigate to the frontend folder:

    cd frontend

• Execute all tests:

    npm test

• Run tests in watch mode (automatically re-runs on changes):

    npm test -- --watch

Testing files can be found here:

chemclick/
  frontend/
    src/
      tests/    # Testing folder
        login/      # Component folder
          login.test.js   # Test file

Backend Unit Testing (Django + MongoMock)

The backend uses Python’s built-in unittest module, along with mongomock to mock MongoDB interactions. Each test is isolated and does not affect production data.

Follow these steps to run tests:

• Navigate to the backend folder:

    cd backend

• Execute all tests:

    python -m unittest discover

Testing files can be found here:

chemclick/
  backend/
    EmailService/
      tests.py                # Email notifications logic
    lessons/
      tests.py                # Lesson creation and progress tracking
    teacher/
      tests.py                # Teacher login
    teacherLessons/
      tests.py                # Teacher-specific progress tracking
    users/
      tests.py                # User creation and login
    announcements/
      tests.py                # Announcement CRUD operations

Each backend test module includes:

• In-memory MongoDB setup with mongomock
• Validation of API responses using Django’s test client or DRF’s APIClient
• print() statements for visible test output in the terminal

(back to top)

User Interface

Landing Page

This displays when you first click the ChemClicks website link. It allows for navigation to other log-in and account creation pages.

Student Log In Page

This page provides students a secure place to input their proper account details to enter the website. It also gives a solution for users who forget their password.

Student Dashboard

This page is the central hub for ChemClicks. Students can access their lessons and see announcements made by their teacher on this page. Additionally, the menu bar at the top provides for navigation to other pages.

Lesson

Lessons differ in user interface from module to module but here's an example of Lesson 4.1. This is where students would complete their task, depending on the predetermined number of correct answers they must submit (indicated by the goal box to the right). The goal number can be changed by an administrator account. The mastery box displays how proficient the user is in answering questions for that particular lesson (mastery is determined by the ratio of correct answers relative to total questions answered).

Profile Page

This page displays to the user their personal statistics for every lesson under each module. If all lessons under a module are completed and submitted, a button will unlock in the module's dropdown and allow the user to generate a PDF certificate of completion to send to their teacher.

Teacher Dashboard (Admin Access)

This page is only visible to administrator accounts. This dashboard includes additionally summary information that tracks the status of every user's progress for each lesson across the website. The administrator can manage existing users on the site and have the option to delete their account or delete all accounts currently registered on the site (this action is irreversible). If the administrator clicks the "View Full Statistics" button, they will be redirected to the Statistics Page (see below).

Statistics Page (Admin Access)

This page can be accessed from the teacher dashboard (see above) and shows a more detailed view of student statistics. The table search bar can filter the table across multiple attributes (e.g., status: completed, late: yes). If the progress header or the mastery header is clicked, the table will sort according to that column (ascending or descending depending on how many times the header is clicked). If a row is clicked, the administrator will be given the option to reset that student's data to zero. Scrolling all the way to the bottom will show a red button that provides the option to wipe all the student's progress to zero.

Logout Page

The user is redirected to this page once they click the "Sign Out" option from the header of either the dashboard or the profile page.

(back to top)

License

!! INCLUDE DISTRIBUTING LICENSE !!

(back to top)