Project Gallery Youtube

Welcome to project-gallery-youtube repository 🎥

Introduction
Technologies Used
- Frontend
- Backend
Installation
Running the Application
Conclusion

Introduction

This application was created by me Allan Hipólito. It allows users to explore and watch YouTube videos in an intuitive and dynamic way. the gallery features a sleek and responsive interface, seamlessly integrating high-quality and diverse content from YouTube.

Technologies Used

Frontend

Vite: A build tool that boasts a faster and leaner development experience for modern web projects.
React: A JavaScript library for building user interfaces. It allows us to create reusable UI components.
TypeScript: A superset of JavaScript, offering static type-checking and the latest ECMAScript features.
TailwindCSS: A utility-first CSS framework packed with classes like flex, pt-4, text-center and more to style your websites without leaving your HTML.
react-navigation: React Navigation is a flexible and extensible navigation library for React Native that enables seamless navigation between different screens and handling deep linking within a mobile app.
react-hot-toast:is a lightweight and customizable React library for displaying toast notifications easily and efficiently.
react-redux: Redux is a predictable state container for JavaScript applications, designed to manage and centralize the application’s state using a single store and unidirectional data flow.

Backend

Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine.
PrismaORM: Prisma ORM is an open-source next-generation ORM.
Express: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.
TypeScript: Brings static typing to JavaScript, ensuring a more predictable runtime behavior.
Jest: Used for writing unit and integration tests for the backend.
PostgreSQL: A powerful, open-source object-relational database system.

Configure the enviroment variables

Before install the depedencies it is necessary you get a key you will access Google console and create a key without restrictions.
After you will put you key in .env following the model in .env.example
Also it is necessary to configure the database, i recommend you use Supabase it will appear same like this postgresql://postgres.[YOUR-USER]:[YOUR-PASSWORD][YOUR-URL]:6543/postgres

Installation

Before you start, ensure you have node and npm installed on your machine.

Clone the repository:

git clone https://github.com/7ipolito/project-gallery-youtube.git

Navigate to the repository:
```
cd project-gallery-youtube
```
Install the dependencies:
- For install both dependecies run:
```
npm install
```
- To inicialize prisma run:
```
cd backend && npx run prisma generate
```

Running the Application

To run the frontend:
```
npm run start-frontend
```
This starts the React application on http://localhost:5173 (or another available port).
To run the backend:
```
npm run start-backend
```
This initializes the Express server, typically on http://localhost:3000.
To run both simultaneously:
```
npm run start
```
This will invoke concurrently to start both the front and back ends.

Ensure that the frontend and backend are configured to run on separate ports to avoid conflicts.

Conclusion

I hope that you to enjoy this project, he was designed with best practices using all features of the latest version of react using Suspense component, useMemo, lazy import and redux.🚀

7ipolito / project-gallery-youtube Goto Github PK