This project is a full-stack application that aims to simulate the business needs of a client-to-engineering-team relationship. The client requested a minimally viable product for a learning app within their education services, emphasizing functionality, modern design, and authentication/session management. Link Learning uses a Vercel-hosted PostgreSQL database and Next.js for the frontend.
- Getting Started
- Configuration
- File Structure
- Features
- Architecture
- API Documentation
- Testing
- Contributing
- Credits
- License
- Contact
To get a copy of the project up and running on your local machine for development and testing purposes, follow these steps below.
You need to have Node.js and npm installed on your machine. If you don't have them installed, you can download them from here.
- Fork and clone the repo.
- Navigate to the project directory.
- Run
npm installto install the dependencies. - Run
npm buildto build the project. - Run
npm startornpm run devto start the server.
- /api/users - Get a list of all users
- /api/reviews - Get a list of all reviews
- /api/reviews - Get a list of all reviews
- /api/reviews - Get a list of all reviews
- /api/reviews - Get a list of all reviews
- /api/reviews - Get a list of all reviews
- Core language used
- JavaScript runtime
- Node.js web application framework and build tool
- External relational database
- Deployment platform
Markup language
- Styling language
- CSS tool used
The landing page for this project utilizes a minimalist approach with three colors selected from the VS Code Night Owl Light/Dark themes, as requested by the client. The dark mode toggle is located on the top right, alongside the login button. The login button routes the user to the login page.
The login page allows the user to enter credentials as one of three roles - admin, instructor, or student. JWT and Bcrypt authentication is implemented in order to route the user to the appropriate view. The different functionalities located in each view is further elaborated in their respective sections below.
The Instructor View is a component of our learning platform designed specifically for instructors. It provides tools and features to help instructors manage cohorts, track student progress, and facilitate effective teaching. It is designed to provide instructors with a comprehensive set of tools to manage their classes effectively,
- Technology Stack: Built using Next.js version 14, leveraging the new App router feautre for improved routing and nav. The frontend is develped with React, used for its powerful state management and component based architecture to create a dynamic and interactive user experience. Styling is done with ailwind CSS, which allows for rapid UI development with its utility-first approach.
- app > Components > instructor: The files for the Instructor Dashboard are organized wihtin the 'Components' folder, which is located inside the 'app' folder. This structure helps in keeping the dashboard-realted components separate from other parts of the app, ensuring maintanilbility and scalibility.
-
Student Analytics: Instructors can view detailed analytics about student performance, including, grades, attendance, and assignment completion.
-
Cohort Management:Instructors can manage different cohorts, view cohort details, and track overall cohort progress.
-
Assignment Overview: A dedicated section for managing assignments, where instructors can view all assignments, their due dates, and grades.
-
Communication Tools: Built-in messaging features enable instructors to communicate with students directly, send announcements, and provide feedback.
-
Cohort Management: Instructors can manage multiple cohorts, whereas students only have access to their own cohort information.
-
Edit Capabilities: Instructors have the ability to edit student information, grades, and attendance records, which is not possible on the Student Dashboard.
The messages component provides capabilities for creating, retrieving, updating, and deleting messages within threads without the need for authentication. Here, you'll find essential information to get started with our API endpoints.
GET: Retrieve messages from a specific thread or a list of all message threads. POST: Create a new message within a thread. PATCH: Update an existing message in a thread. DELETE: Remove a message from a thread.
GET /messages Description: Retrieve a list of all message threads.
POST /messages Description: Create a new message within a specific thread.
PATCH /{messageId} Description: Update an existing message in a thread.
DELETE /{messageId} Description: Remove a message from a thread.
To connect to your Postgres database using the Vercel Postgres SDK:
- Install the SDK: npm install @vercel/postgress
- Import the 'sql' function from the SDK
import { sql } from "@vercel/postgres";- Construct SQL queries using the 'sql' function
export async function GET(request) {
const data = await sql`SELECT * FROM users`;
return NextResponse.json({ data }, { status: 200 });
}- Examples:
- CREATE TABLE posts (likes INT); // Create a new table in the database
- SELECT * FROM posts; // Get all posts in the database
- SELECT * FROM posts WHERE likes > ${likes}; // Get all posts with more than 100 likes
- INSERT INTO posts (likes) VALUES (${likes}); // Insert a new post into the database
- UPDATE posts SET likes = 200; // Update all posts to have 200 likes
- DELETE FROM posts; // Delete all posts in the database
- Preventing SQL injections The Vercel Postgres SDK autocamtically prevents SQL injections by using parameterized queries. Parameters are extracted and added to an array before being sent to the PostgreSQL server. This ensures your queries are sanitized and secure.
In our API, you can utilize dynamic routing to handle requests based on specific IDs. This allows you to create flexible endpoint structure where requests are routed after the provided ID.
To implement dynamic routing with [id], follow these steps
- Create a Dynami Folder: Set up a folder in your API folder with the format
[id]where[id]represents the placeholder for the ID parameter. - Define Route Handlers: Within the dynamic folder, define route handlers for each HTTP method(GET, PATCH, DELETE) to handle requests targeting specific IDs.
- Handle Requests: Catpture the ID from the request URL or data and use it to perform CRUD operations.
Consider the following folder structure in your API:
/app
/api
/[id]
route.jsInside the route.js file, you can access the ID parameter from the request URL and process the request.
Ensure proper error handling and validation to handle cases where ID does not exist or the request fails due to other reasons### Admin Page 🗂️
The Admin View is a component of our learning platform designed specifically for Admins of the platform. Has the capabilities of adding new intructors and students to the database. It has full CRUD opaerations connected to an API. It provides tools and features to help Admins manage Instructors, Students, and Cohorts, track student progress, and facilitate effective teaching.
-
Add Instructors Tools: Administrators can add new instructors to the system, providing necessary information such as name, contact details, and expertise.
-
Add Students Tools: Admins can register new students into the system, including their personal details and enrollment information.
-
Monitor Student Progress: The dashboard allows administrators to track the progress of individual students, including course completion rates, grades, and any additional performance metrics.
-
Instructor Rating: Administrators can rate instructors based on their teaching performance using a scalable rating system, providing valuable feedback for improvement.
-
Student Analytics: Monitor student progress, view grades, and track attendance to assess performance effectively.
-
Edit Student Information: Instructors have the ability to edit student details, including grades, attendance records, and personal information.
-
Communication Tools: Stay connected with students through built-in messaging features, allowing instructors to send announcements, reminders, and personalized messages directly to students.
