The newvalue from raquellores

Welcome to New Value's News Management Tool

This is the final project of our web development bootcamp, created in collaboration with New Value.
Throughout May, we've developed a dynamic and modern News Management Tool for New Value to share quality content with their audience. This project has been a rewarding challenge, allowing us to refine our fullstack development skills while building an intuitive, efficient, and visually appealing platform using the latest technologies and best practices.

About

This project features two roles: admin and news moderators. While everyone can access the blog and read the news, moderators have the ability to create, edit, and delete articles.

The admin has all these capabilities plus the ability to register new users (moderators). User sessions are securely encrypted with usernames and passwords to ensure data protection.

Project Local Configuration⚙

Clone the Repository

git clone https://github.com/mariandrean/NewValue-Blog

To enter the repository folder

cd NewValueNews

For the Frontend, you have to follow the next steps:

First enter into the folder

cd client

For install all dependencies of Frontend, copy the next line

npm i

Make the server run

npm run dev

This will start the server http://localhost:5173 using Vite with React.

For the Backend, you have to follow the next steps:

.env:

First create the file .env located in the folder server.
Copy the information placed on .env_example and fill it with your personal data.

Database Connection:

No need to set up a local database because our database is hosted on a server. This allows anyone to upload news articles without needing a local DB.

Getting Started:

First, navigate to the server folder

cd server

For install all dependencies of Backend, copy the next line

npm i

This will have the config for run the DB on Cloud.

Test🧪

For this part you have to follow the next steps:

First enter into the folder

cd server

For install all Test dependencies, copy the next line

npm i

Copy code to start the Jest Server

npm run test

This will run the tests.

Postman

Click on this link to obtain our Postman information about the CRUD methods.
You can view, add, edit, and delete the articles of our website on it.
Link for Postman Documentation

Project Structure📂

We have built the folder ecosystem for our project in the Front-end and Back-end in an orderly and methodical way. We have divided the project into two main folders called client and server, and we have organized the files in each one correctly for proper behavior and understanding of the repository.

Here are the most important ones:

Client Folder

Folder	Description
node_modules	Contains all the dependencies of your project. When you install packages using npm, they are stored here.
db_server	Plays a crucial role in ensuring the proper functioning and security of the database server.
src	This is where the source code of your React application resides. It typically contains the following subfolders: components: Contains reusable React components that make up our application's UI. pages: Contains React components that represent different pages of our application. assets: Holds static assets like images, fonts, or other media files used in your application. services: Contains modules for interacting with external services or APIs. context: Contains information about the context or environment in which the application operates. routes: Defines the various routes or endpoints available in the application's API or web server.

Server Folder

Folder	Description
__test__	Contains all the test files.
controllers	Handles HTTP requests.
database	Configuration of connections with the database.
helpers	Contains import and export validations from express-validator.
interfaces	Defines data structures for consistent communication.
middlewares	Handles request processing and control flow.
models	Contains the models of the News and User.
utils	Provides reusable functionalities.
validators	Contains the validations of the News and User.
routes	Organizes API endpoint definitions.