Knobull Student News Website Documentation

Overview

This is a Student News Website for Knobull, designed to allow students to browse news articles.

Supervisor: Lynn Bentley (The Founder of Knobull)

Preview

Current News Page

Current Management Page

Current Add Article Page

Architecture

This application follows the standard MERN Stack architecture

• MongDB
(Database)
• Express.js
(Backend)
• React.js
(Frontend)
• Node.js
(Backend)

P.S. 'react-ant-admin', an MIT licensed React.js based dashboard was used for the management system

It's not required to study the original dashboard to understand the current project, since the open source dashboard was documented in chinese. Instead, I will document this project throughly with detailed comments

Requirements

• Node.js v14+
• MongoDB v4.4+

Installation and Setup

1. Clone the repository and navigate into the main directory

2. To install dependencies, navigate to the "front" directory and run:

npm install

(If encounter issues, try npm install --legacy-peer-deps)

3. also, navigate to the the "server" directory and run:

npm install

4. To start the front, run:

npm run dev

5. To start the server, run:

Nodemon

API Documentation

API Directory Structure

server

-api

• article.js
• category.js
• draft.js
• index.js
• login.js
• tag.js
• user.js

Database

The website uses MongoDB, a NoSQL database, as the primary data store.

Database Schema

The application consists of the following four collections:

1. User Collection: This collection stores information about the users of the system. Each document in the user collection has the following fields:

• name: String - The username of the user
• password: String - The hashed password of the user
• salt: String - The unique salt used in the password hashing process
• userType: Number - The type of the user (e.g., admin, regular user, etc.)
• avatar: String - The URL of the user's avatar image
• collectArticle: Array - An array storing the articles collected by the user
• collectComment: Array - An array storing the comments collected by the user

2. Category Collection: This collection is used to store various categories under which articles can be posted. It has the following field:

• name: String - The name of the category

3. Article Collection: This collection is used to store articles posted by users. Each document in the article collection has the following fields:

• title: String - The title of the article
• desc: String - A brief description of the article
• categoryId: ObjectId - A reference to the associated category in the Category Collection
• charge: Number - The cost to access the article, if applicable
• banner: String - The URL of the banner image for the article
• content: String - The content of the article

4. Pay Collection: This collection is used to record transactions where users pay to access certain articles. Each document in the pay collection has the following fields:

• userId: String - The user who made the payment
• articleId: String - The article for which the payment was made

Database Notes

1. Database operations are performed using the Mongoose API, which provides a simple and intuitive interface for creating, reading, updating, and deleting documents.

2. password storage is handled with security in mind. User passwords are hashed using the SHA1 algorithm, and a unique salt is generated for each user to prevent rainbow table attacks.

3. The database is initialized with an admin user when the application is first run, allowing immediate administrative access.

4. with MongoDB and Mongoose, data enforcement is done at the application level rather than the database level, offering flexibility in data structures and types.