![](https://private-user-images.githubusercontent.com/45522944/348453847-13d8d8fc-bee8-4713-82f7-a8059f7c7808.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQ1MzExMjMsIm5iZiI6MTcyNDUzMDgyMywicGF0aCI6Ii80NTUyMjk0NC8zNDg0NTM4NDctMTNkOGQ4ZmMtYmVlOC00NzEzLTgyZjctYTgwNTlmN2M3ODA4LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODI0VDIwMjAyM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTk1NWZkNDBmMjBkZjYxMjg4ZjRiZjYyMTNjMDQ0NWRkMDkwN2I3MmI0YmQxMjU4NjU0MTZkYjdlNDllNGYzMGMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.ua554-3ljyBMBwooqD1lf9fBlpc_YncBenRj4LkG3QU)
Welcome to project-gallery-youtube repository 🎥
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.
- 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.
- 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.
- 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
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
-
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.
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.🚀