The Learning Source Enrollment Registration

ESL Registration Portal Documentation

Table of Contents

1. About The Project
   • Deployment Information
   • Built With
   • Database Schema
   • Learning Goals
2. Getting Started
   • Prerequisites
   • Installation
   • Usage
     • Repository Usage
     • Running Tests
   • Gems Utilized
   • JavaScript Packages Utilized
3. Roadmap
   • Initial Research and Decisions
   • Enrollment Management
   • Prospective Student Features
   • Admin Features
   • Database Enhancements
   • Deployment and Documentation
   • Stretch Goals
4. Contact
5. Acknowledgments
6. License

About The Project

This project aims to create an online enrollment registration website for The Learning Source (TLS), an organization committed to empowering immigrant and refugee students through education. The primary goal is to streamline the enrollment process for prospective students, based on staff insights and feedback.

Our web application harnesses React for frontend and Ruby on Rails for backend within a unique monolithic setup. We leverage HTML5, CSS3, JavaScript, Ruby, and PostgreSQL alongside Vite.js for a streamlined development experience. The design workflow is managed through GitHub Issues and documented using Google Docs.

To ensure high quality, we employ a Test-Driven Development (TDD) approach using RSpec for unit tests; and Capybara, Selenium, and ChromeDriver for feature testing and cross-browser compatibility checks.

For our DevOps processes, we use Render and GitHub to maintain a smooth and reliable release pipeline. This project is an opportunity for us to explore the combination of Rails and React.js, enhance our understanding of TDD, and optimize our DevOps practices.

(back to top)

Deployment Information

The Learning Source Enrollment Registration was, but is no longer, deployed on Render. Further development of this project has been put on hiatus due to a combination of organizational structure change, this having been a volunteer project, and development of other projects professionally at work.

There are still features to experiment with and work on, for learning purposes, and once there is time to do so the project will be re-deployed.

(back to top)

Built With

(back to top)

Database Schema

(back to top)

Learning Goals

The primary learning goal for this project was to learn how to use Javascript and React. The secondary goal was to learn how to integrate it into Rails within a Monolith application where the normal Rails workflow would apply but the view pages would be rendered using React instead of Rails. Both of these goals were accomplished within the scope of the project.

(back to top)

Getting Started

This section provides a step-by-step guide on how to install and run this project on your local machine.

Prerequisites

For tests to be run correctly then make sure you have installed Chrome Driver before you begin. This is needed for the selenium webdriver gem to function, allowing RSpec and Capybara to run JavaScript correctly and test the webpage contents.

For macOS users:

1. Install Chrome Driver using Homebrew: brew install --cask chromedriver.
2. Confirm installation by running chromedriver -v.

Note: In case Chrome Driver is quarantined by macOS:

1. Run which chromedriver to find the installation path. The output should look similar to /usr/local/bin/chromedriver.
2. Run xattr -d com.apple.quarantine /usr/local/bin/chromedriver.
3. Confirm it's working by repeating step 2 above.

(back to top)

Installation

Follow the steps below to install and set up the repository on your local machine:

1. Fork the repository.
2. Clone the forked repository to your local machine.
3. Open your console or terminal and navigate to the project directory.
4. Run bundle install to install the required Ruby gems.
5. Execute bundle exec vite install to set up Vite.
6. Run npm install to install the necessary npm packages.

(back to top)

Usage

Instructions to be added

(back to top)

To use the repository

Instructions to be added

(back to top)

To run tests

You will need two terminal windows (or tabs):

1. Terminal 1: Navigate to the project directory and start the Vite server with npm run dev. This command starts the Vite server, which the tests will interact with. Ensure that the Vite server is always running in the background while executing the tests.

2. Terminal 2: Navigate to the project directory and run bundle exec rspec to run the entire RSpec test suite. The test results will be output in this terminal window.

(back to top)

Gems Utilized

The Learning Source Enrollment Registration utilizes the following gems:

• Ruby 3.1.1
• Rails 7.0.4 - Our web application framework.
• sprockets-rails - Rails asset pipeline.
• pg - PostgreSQL database adapter.
• puma - A Ruby/Rack web server built for concurrency.
• vite_rails - Integrates Vite with Rails.
• tzinfo-data - Provides daylight savings time (DST) data.
• phonelib - A library to validate phone numbers.
• capybara - Helps you test web applications by simulating how a real user would interact with your app.
• debug - A new Ruby debugging library (only for MRI and mingw platforms).
• factory_bot_rails - A fixtures replacement for focused and readable tests.
• faker - A library for generating fake data.
• pry - A runtime developer console and IRB alternative.
• rspec-rails - Testing framework for Rails.
• selenium-webdriver - Tool for writing automated tests of websites.
• shoulda-matchers - Provides RSpec- and Minitest-compatible one-liners to test common Rails functionality.
• rubocop-rails - Rails-specific static code analysis.
• rubocop-rspec - Code analyzer for RSpec files.
• simplecov - Code coverage analysis tool for Ruby.

(back to top)

JavaScript Packages Utilized

The Learning Source Enrollment Registration utilizes the following JavaScript packages:

• vite: A build tool that aims to provide a faster and leaner development experience for modern web projects.
• vite-plugin-ruby: A Vite.js plugin for better integration with Ruby on Rails.
• @date-io/date-fns: A package to use date-fns with date-io.
• @emotion/react: A library for writing css styles with JavaScript.
• @emotion/styled: A library for creating React components with style.
• @fortawesome/fontawesome-svg-core: The SVG core of Font Awesome.
• @fortawesome/free-regular-svg-icons: Regular style SVG icons from Font Awesome.
• @fortawesome/free-solid-svg-icons: Solid style SVG icons from Font Awesome.
• @fortawesome/react-fontawesome: Font Awesome React component.
• @mui/base: The foundation of the MUI ecosystem, used by all MUI components.
• @mui/lab: MUI components that are in active development.
• @mui/material: React components for faster and easier web development by MUI.
• @mui/system: Low-level utility functions called "style functions" for building powerful design systems by MUI.
• @mui/x-date-pickers: Date Picker component by MUI.
• @vitejs/plugin-react: Official Vite plugin for React.
• bootstrap: The most popular HTML, CSS, and JS library in the world for building responsive, mobile-first projects on the web.
• date-fns: Modern JavaScript date utility library.
• mdb-react-ui-kit: UI Kit based on Bootstrap 5 for React by MDBootstrap.
• react: A JavaScript library for building user interfaces.
• react-bootstrap: The most popular front-end framework, rebuilt for React.
• react-bootstrap-icons: Bootstrap icons, but for React.
• react-datetime-picker: A date/time picker for react (using bootstrap).
• react-dom: Serves as the entry point to the DOM and server renderers for React.

(back to top)

Roadmap

The following is a roadmap for our project, outlining our Minimum Viable Product (MVP) and the key steps towards achieving it:

Initial Research and Decisions

• Evaluate the feasibility of passing data between controller and React components in a monolithic MVC, RESTful architecture using Vite.
• Assess the potential for Test-Driven Development (TDD) using RSpec and Capybara for webpages that utilize JavaScript.
• Decide on project structure: whether to utilize a standard Rails monolith or a React + Rails setup with Vite.

Enrollment Management

• Develop the ability to create new enrollment sessions.
• Restrict the creation of new enrollment sessions to admins only.

Prospective Student Features

• Enable prospective students to view a list of enrollment sessions.
• Allow prospective students to select an enrollment session to join from the list of available sessions.
• Implement a cap on each session's student count (default of 30), after which prospective students won't have the option to join.
• Upon successful joining of a session, redirect students to a confirmation page displaying registration details and staff contact information.

Admin Features

• Enable admins to view a list of enrollment sessions.
• Develop the capability for admins to view the details of specific enrollment sessions.
• Create editable and deletable buttons for admins to manage students within a specific enrollment session.
• Build the ability for admins to modify details of a specific enrollment session.
• Enable admins to add and/or remove students from a specific enrollment session.
• Admin login authentication
• Admin authorization within admin workflow

Database Enhancements

• Add "language spoken" field to the student database schema.

Deployment and Documentation

• Deploy the application on Render.
• Create a detailed README file.

Stretch Goals

• Add a language toggle for the student enrollment user experience to support Spanish, Arabic and Russian.
• Add accessibility/Alt descriptive text to page elements

Please refer to the open issues for a full list of proposed features and known issues.

(back to top)

Contact

Mostafa Sakr	Bryan Keener
GitHub LinkedIn	GitHub LinkedIn

(back to top)

Acknowledgments

The Learning Source

(back to top)

License

This project is licensed under the terms of the MIT license. For more details, see the LICENSE file.

(back to top)