Skip to content

Latest commit

 

History

History
178 lines (139 loc) · 8.36 KB

README.md

File metadata and controls

178 lines (139 loc) · 8.36 KB
Raw

TechToday 📰💻

This project is a proposal of a sustainable development of a news management web application. Our website have a low-consumption design, using dark mode with a monotone palette of colours, system fonts that are already loaded on all the devices and images in webp format to reduce their weight. The user flow is easy and intuitive, and we have taken into account the UX without barriers avoiding pop-up banners and using dark patterns. We have also not included videos or animations to optimize the loading time of the website.

Index

Description

The project has been built with two roles: admin and user. We have encrypted user sessions with username and password. On the one hand the admin is able to create, delete, edit and view news articles, and on the other hand the user can browse articles and also can use the like button which increment the news they really love.

Project Configuration

Clone the Repository

git clone https://github.com/pointfs/NEWSPAPER.git
To enter the repository folder
cd NEWSPAPER

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.

Let's get started with MySQL Workbench.

If you already have your Workbench environment set up, we can create a Database:
To do this, paste the following command into the Workbench sheet

CREATE DATABASE tech_today;

Once we have our Database created, we can proceed with the next commands.

First enter into the folder
cd server
For install all dependencies of Backend, copy the next line
npm i
Make the server run
npm run dev
This will start the connection to the Database on Workbench.

Tests

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.

Initialize the Postman

Click on this link to obtain our Postman information about the methods of the CRUD in our database. You can view, add, edit, and delete the articles of our website on it.
https://albamartinmz.postman.co/workspace/My-Workspace~1d37aef0-5e05-4f4d-8aa0-e702b0ca00bc/collection/32563763-1112c32c-0d93-4046-a71e-6813616cd5b7?action=share&creator=32563763

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 in two folders called client and server, and we have organized the files in each one correctly for the proper behaviour and understanding of the repository. We are going to mention the most important ones.

On the client folder:

  • 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:
  1. components: contains reusable React components that make up our application's UI. Each component folder contains the subfolders of styles, CSS files or preprocessor files for styling your components.
  2. pages: contains React components that represent different pages of our application.
  3. assets: holds static assets like images, fonts, or other media files used in your application.
  4. services: contains modules for interacting with external services or APIs, in this case an archive of JavaScript.
  5. context: contains information about the context or environment in which the application operates.
  6. routes: defines the various routes or endpoints available in the application's API or web server.

On the server folder:

  • controllers: to handle HTTP requests.
  • database: configuration of connections with the database.
  • helpers: contains the import and export validations from express-validator.
  • interfaces: define data structures for consistent communication.
  • middlewares: handle request processing and control flow.
  • models: contains the models of the News and User.
  • utils: provide reusable functionalities.
  • validators: contains the validations of the News and User.
  • routes: organize API endpoint definitions.

Technologies

            react                       

Authors

Next Steps

In our team we have several goals to meet and we are going to list them. We are working on improving our project and we have it under construction:

  • The like button: in the future this button will be able to add the user's favorite news to another page
  • The search bar: we will make this bar useful to search for keywords of the news that we want to see
  • On the SideBar: the profile icon doesn´t have functionality, and we want to develop a profile screen to our users
  • On the app in general: we will develop that the administrator can manage the roles of the users

Contributions

Contributions are welcome! If you find any problems or have suggestions for improvement, please create an issue or make a pull request.

⬆️ Back to Index