This is the frontend for the ENMU Class Reviews application. It allows users to sign up, log in, create posts, view all posts, view discussions, and participate in discussions about classes.
- Prerequisites
- Installation
- Project Structure
- Technologies Used
- Available Scripts
- Dependencies
- Contributing
- License
- Screenshots
Before running the project, ensure you have the following installed:
- Python 3.x (for the backend)
- Node.js and npm (for the frontend)
- pip (Python package installer)
- Virtualenv (optional, for creating isolated Python environments)
To get started with the project, follow these steps:
- Clone the repository:
git clone https://github.com/nwc6624/enmu-class-reviews-frontend.git cd enmu-class-reviews-frontend
Install the dependencies:
npm install
Usage To run the application locally, use the following command:
npm start
This will start the development server and open the application in your default web browser. The app will reload if you make edits.
(NOTE: Front end components have been updated since 1.1, bac)
enmu-class-reviews/
├── backend/
│ ├── app/
│ │ ├── init.py # Initializes the Flask application and its configurations.
│ │ ├── models.py # Contains the database models for the application.
│ │ ├── routes.py # Defines the API routes for the application.
│ │ ├── config.py # Contains configuration settings for the application.
│ ├── migrations/ # Contains database migration files.
│ ├── .env # Environment variables for the backend.
│ ├── app.py # The entry point for the Flask application.
│ ├── requirements.txt # Lists the Python dependencies for the backend.
│ ├── wsgi.py # WSGI entry point for deployment.
├── frontend/ # enmu-class-reviews-frontend/
│ ├── public/ # Contains the static assets for the application.
│ │ ├── index.html # The main HTML file for the application.
│ ├── src/ # Contains the source code for the application.
│ │ ├── components/ # Contains the React components for the application.
│ │ │ ├── SignUp.js # Component for user sign-up.
│ │ │ ├── Login.js # Component for user login.
│ │ │ ├── Post.js # Component for displaying individual posts.
│ │ │ ├── Discussion.js # Component for displaying discussion threads.
│ │ │ ├── NavBar.js # Component for the navigation bar.
│ │ ├── pages/ # Contains the React components for different pages.
│ │ │ ├── Home.js # Home page component.
│ │ │ ├── About.js # About page component.
│ │ ├── services/ # Contains the service modules for API calls.
│ │ │ ├── authService.js # Service module for authentication-related API calls.
│ │ ├── App.js # The main component that sets up the routing.
│ │ ├── index.js # The entry point for the React application.
│ ├── package.json # Contains the dependencies and scripts for the frontend.
│ ├── package-lock.json # Lockfile for ensuring consistent installations.
│ ├── .env # Environment variables for the frontend.
public/: Contains the static assets for the application.
src/: Contains the source code for the application.
components/: Contains the React components for the application.
pages/: Contains the React components for different pages.
services/: Contains the service modules for API calls.
App.js: The main component that sets up the routing.
index.js: The entry point for the React application.
Python: For backend development with Flask.
Flask: For creating RESTful API services.
Flask-SQLAlchemy: For ORM with SQLite or Azure SQL Database.
Flask-JWT-Extended: For JWT authentication.
JavaScript: For frontend development with React.js.
React.js: For building the user interface.
Axios: For making HTTP requests from the frontend to the backend.
JWT: For user authentication and authorization.
Git: For version control and source code management.
GitHub: For hosting repositories and CI/CD with GitHub Actions.
Azure App Service: For hosting the backend. --> For production use
Azure Static Web Apps: For hosting the frontend. --> For production use
**SQLite or Azure SQL Database: For database management. -->Currently using SQLite for Flask demo
Postman: For testing API endpoints.
In the project front end directory, you can run:
npm start: Runs the app in the development mode.
npm build: Builds the app for production to the build folder.
npm test: Launches the test runner in the interactive watch mode.
npm eject: Removes the single build dependency from your project.
Note: this is a one-way operation. Once you eject, you can’t go back!
This project uses the following dependencies:
axios: For making HTTP requests.
react: The core React library.
react-dom: Serves as the entry point to the DOM and server renderers for React.
react-router-dom: Provides DOM bindings for React Router.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Author: - @nwc6624
This project is licensed under the MIT License - see the LICENSE file for details.
Included are images from 8/21/24 with dummy info via the backend database. Current UI subject to change.
Homepage with demo data.
Course Review Page.
Logged in user's options menu.
Top of the "About" page.
Bottom of the "About" page.
Current "Sign Up" page as of 8/21/2024.