Projet Web

This repository contains the source code for a blog project developed using Express.js and Prisma.

Getting Started

Prerequisites

  • Node.js
  • MySQL

Installation

  1. Clone the repository:

    git clone https://github.com/Haitam-Elgharras/projet-web.git
  2. Change into the project directory:

    cd projet-web
  3. Install the dependencies:

    npm install

Usage

  1. Start the server:

    npm start
  2. Access the application in your web browser:

    
    

Project Structure

The project follows a typical structure generated by the Express generator. It separates routes and models to keep the code organized and maintainable. The models directory contains functions that are used in the routes to make database queries and perform operations on the data.

Backend Development

Authentication Middleware

The project utilizes an authentication middleware to verify user credentials before performing certain operations. This ensures that only authenticated users can access protected routes and perform authorized actions.

Database Integration

The project uses Prisma as the ORM (Object-Relational Mapping) tool to interact with the MySQL database. Prisma simplifies database operations by providing a type-safe API for querying and manipulating data. It also handles database migrations for seamless schema updates.

To set up the database:

  1. Install Prisma as a dev dependency:

    npm install prisma -D
  2. Initialize Prisma:

    npx prisma init
  3. Add the database URL to the .env file.

  4. Define the database schema in the schema.prisma file.

  5. Apply migrations to create the initial database structure:

    npx prisma migrate dev --name init

Prisma Studio

Prisma Studio provides a visual interface to explore and interact with the database. It allows you to view tables, records, and relationships, making it easier to debug and test your database.

To launch Prisma Studio:

npx prisma studio

Frontend Development

The frontend of the application includes features such as displaying articles, a navigation bar, adding comments, adding new articles, and filtering articles by category.

To ensure a seamless user experience, the application implements token-based authentication using JSON Web Tokens (JWT). When a user registers or logs in, a token is generated on the server and sent back to the frontend. This token is stored in the local storage and sent with subsequent requests to authenticate the user. The session remains active even if the user refreshes the page.

When the application loads, the window.onload event is triggered. It checks if a valid token exists in the local storage. If so, it automatically authenticates the user, allowing them to access protected routes without requiring manual login.

To log out, the application removes the token from the local storage, effectively ending the session.

Contributing

To contribute to this project, follow these steps:

  1. Fork the repository on GitHub.
  2. Create a new branch.
  3. Make your modifications and commit your changes.
  4. Push your changes to your forked repository.
  5. Submit a pull request.

About the Author

This project is maintained by Haitam Elgharras. Feel free to reach out if you have any questions or feedback.

License

This project is licensed under the MIT License.