https://github.com/tjas/tjas-aluratube
Project developed at Alura's React Immersion 2022 and evolved after, to practice React and other user interface technologies.
https://github.com/tjas/tjas-aluratube
aluratube front-end imersao-react javascript next nextjs node nodejs react reactjs tjas tjas-aluratube ui user-interface youtube
Last synced: 3 months ago
JSON representation
Project developed at Alura's React Immersion 2022 and evolved after, to practice React and other user interface technologies.
- Host: GitHub
- URL: https://github.com/tjas/tjas-aluratube
- Owner: tjas
- License: mit
- Created: 2022-11-11T02:12:16.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-10T16:25:46.000Z (11 months ago)
- Last Synced: 2024-12-26T18:26:06.147Z (5 months ago)
- Topics: aluratube, front-end, imersao-react, javascript, next, nextjs, node, nodejs, react, reactjs, tjas, tjas-aluratube, ui, user-interface, youtube
- Language: JavaScript
- Homepage: https://tjas-aluratube.vercel.app/
- Size: 3.46 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# TJAS AluraTube
[](./README.md)
[](https://tjas-aluratube.vercel.app/)
[](https://hits.seeyoufarm.com)
[](https://github.com/tjas/tjas-aluratube/blob/master/LICENCE)
[](https://github.com/tjas/tjas-aluratube/graphs/commit-activity)
[](https://github.com/tjas/tjas-aluratube/stargazers)
[](https://github.com/tjas/tjas-aluratube/watchers)
[](https://github.com/tjas/tjas-aluratube/forks)
[](https://nodejs.org/en/)
[](https://nextjs.org/)
[](https://reactjs.org/)
> ⭐ Mark the project with a star. 👀 Watch the project for receive news.
>
> ⚙️ [Access the demo and see the project working](https://tjas-aluratube.vercel.app/).
>
> 🇧🇷 Acesse a versão em [Portuguese do Brasil](./README_pt-br.md) desta página.
This project is an adaptation and evolution of the **[AluraTube](https://github.com/alura-challenges/aluratube)** project, proposed at [Alura](https://www.alura.com.br/)'s 5th React Immersion, that occured in november 2022. It initially intended to spread basic knowledgements about [ReactJS](https://reactjs.org/) technology, but became an opportunity do practice and evolve personal skills in such technology and other related ones.
The **React** is a [JavaScript](https://www.javascript.com/) library created by Facebook for building modern user interfaces, known as front-end applications, which are connected to back-end applications, that serves content and manage negocial rules in complex systems. The React runs over the [NodeJS](https://nodejs.org/en/), an open-source, cross-platform JavaScript runtime environment, and is potencialyzed by other libraries and frameworks, mainly the [NextJS](https://nextjs.org/), a very popular framework, wich is even used in this project.
The TJAS AluraTube is a video platform inspired by [YouTube](https://www.youtube.com/). However, the **TJAS AluraTube** does not intend to be an YouTube's copy, but even go beyond: taking the project developed at React Immersion as starting point, but proposing some innovative features that just refer to YouTube as the main videos and contents provider. Alura and AluraTube are trademarks of _AOVS Sistemas de Informática S.A._, all rights reserved. YouTube is a trademark of _Google LLC_, all rights reserved.
## Getting Started
This is an example of how you may set up the project locally in your computer. To get a local copy up and running follow these steps:
1. Make sure you have Node.JS 18.12.1+ with npm 8.19.2+ installed or do it from [NodeJS.org](https://nodejs.org/en/download/);
2. Make sure you have Git installed or do it from [Git-scm.com](https://git-scm.com/);
3. Access the folder you want to save the project, then clone the repo there
```sh
git clone https://github.com/tjas/tjas-aluratube
```
4. Access the project folder;
5. Install the project dependencies (obtained by default from `package.json` file)
```sh
npm install
```
6. Run the application
```sh
npm run dev
```
7. Finally, access the aplication at http://localhost:3000
## Contributing
1. Fork it!
2. Create your feature branch:
```sh
git checkout -b my-new-feature
```
3. Add files changed:
```sh
git add .
```
4. Commit your changes:
```sh
git commit -m "Add some useful comment here"
```
5. Push to the branch:
```sh
git push origin my-new-feature
```
6. Submit a [pull request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)
* Add a title and description that let clear your suggestion;
* Use the English language for comments and branch names;
* After your pull request is merged, you can safely delete your branch.
## Todo List
* [ ] Obtain a list of videos dinamically from [Google API](https://www.npmjs.com/package/googleapis);
* [ ] Add fade efect in horizontal scrolls extremities;
* [ ] Create, edit and remove playlists;
* [ ] Add and remove videos;
* [ ] Add and remove favorites;
* [ ] Edit user profile informations;
* [ ] Persist informations in local data base;
* [ ] Translate to other languages;
* [ ] Create login page;
* [ ] Separate public and private pages.
## References
* [Node.JS LTS version](https://nodejs.org/en/);
* [npm documentation](https://docs.npmjs.com/);
* [React.JS documentation](https://reactjs.org/docs/getting-started.html);
* [Next.JS documentation](https://nextjs.org/docs/getting-started);
* [Styled Components documentation](https://styled-components.com/docs);
* [next.config.js file of Styled Components examples](https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/next.config.js), for using React with Next;
* [GitHub's API](https://api.github.com/users/tjas);
* [Supabase documentation](https://supabase.com/docs);
* [Supabase-JS](https://www.npmjs.com/package/@supabase/supabase-js);
* [Using the Effect Hook](https://en.reactjs.org/docs/hooks-effect.html).
## Other interesting links
* [Figma](https://www.figma.com/);
* [Visual Studio Code](https://code.visualstudio.com/), development interface;
* [Unsplash](https://unsplash.com/), for free images;
* [Material Design components](https://m3.material.io/components);
* [Vercel's GitHub profile](https://github.com/vercel);
* [Styled Components official using examples](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components);
* [Alura's Github "Alura Challenges" profile](https://github.com/alura-challenges), cool projects for reference;
* [Project "Flappy Bird: Dev Soutinho"](https://github.com/omariosouto/flappy-bird-devsoutinho/blob/master/CONTRIBUTING.md);
* [Project "Awesome Design Systems"](https://github.com/alexpate/awesome-design-systems), for design systems reference;
* [Alura Verso](https://www.alura.com.br/aluraverso);
* [TechGuide.sh](https://techguide.sh/), a roadmap for technology career;
* [Vitrine Dev](https://cursos.alura.com.br/vitrinedev);
* [Babel](https://babeljs.io/), a JavaScript compiler;
* [QUOKKA](https://quokkajs.com/), a JavasCript coding support tool;
* [Supabase](https://supabase.com/).
## Contact
**Thiago Jorge Almeida dos Santos**, project author and maintainer.
[](https://www.linkedin.com/in/thiago-tjas) [](https://www.youtube.com/@thiago_tjas) [](https://www.instagram.com/thiago.tjas/) [](http://thiago-tjas.com/) [](https://github.com/tjas)
## Licence
* Code distributed under [MIT License](https://github.com/tjas/tjas-aluratube/blob/master/LICENCE).