Skip to content

Commit 4542b87

Browse files
author
Thiago Jorge Almeida dos Santos
committed
Fist commit
1 parent 66f0a3b commit 4542b87

17 files changed

+2648
-0
lines changed

‎.gitignore

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
.pnpm-debug.log*
9+
10+
# Diagnostic reports (https://nodejs.org/api/report.html)
11+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
12+
13+
# Runtime data
14+
pids
15+
*.pid
16+
*.seed
17+
*.pid.lock
18+
19+
# Directory for instrumented libs generated by jscoverage/JSCover
20+
lib-cov
21+
22+
# Coverage directory used by tools like istanbul
23+
coverage
24+
*.lcov
25+
26+
# nyc test coverage
27+
.nyc_output
28+
29+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
30+
.grunt
31+
32+
# Bower dependency directory (https://bower.io/)
33+
bower_components
34+
35+
# node-waf configuration
36+
.lock-wscript
37+
38+
# Compiled binary addons (https://nodejs.org/api/addons.html)
39+
build/Release
40+
41+
# Dependency directories
42+
node_modules/
43+
jspm_packages/
44+
45+
# Snowpack dependency directory (https://snowpack.dev/)
46+
web_modules/
47+
48+
# TypeScript cache
49+
*.tsbuildinfo
50+
51+
# Optional npm cache directory
52+
.npm
53+
54+
# Optional eslint cache
55+
.eslintcache
56+
57+
# Optional stylelint cache
58+
.stylelintcache
59+
60+
# Microbundle cache
61+
.rpt2_cache/
62+
.rts2_cache_cjs/
63+
.rts2_cache_es/
64+
.rts2_cache_umd/
65+
66+
# Optional REPL history
67+
.node_repl_history
68+
69+
# Output of 'npm pack'
70+
*.tgz
71+
72+
# Yarn Integrity file
73+
.yarn-integrity
74+
75+
# dotenv environment variable files
76+
.env
77+
.env.development.local
78+
.env.test.local
79+
.env.production.local
80+
.env.local
81+
82+
# parcel-bundler cache (https://parceljs.org/)
83+
.cache
84+
.parcel-cache
85+
86+
# Next.js build output
87+
.next
88+
out
89+
90+
# Nuxt.js build / generate output
91+
.nuxt
92+
dist
93+
94+
# Gatsby files
95+
.cache/
96+
# Comment in the public line in if your project uses Gatsby and not Next.js
97+
# https://nextjs.org/blog/next-9-1#public-directory-support
98+
# public
99+
100+
# vuepress build output
101+
.vuepress/dist
102+
103+
# vuepress v2.x temp and cache directory
104+
.temp
105+
.cache
106+
107+
# Docusaurus cache and generated files
108+
.docusaurus
109+
110+
# Serverless directories
111+
.serverless/
112+
113+
# FuseBox cache
114+
.fusebox/
115+
116+
# DynamoDB Local files
117+
.dynamodb/
118+
119+
# TernJS port file
120+
.tern-port
121+
122+
# Stores VSCode versions used for testing VSCode extensions
123+
.vscode-test
124+
125+
# yarn v2
126+
.yarn/cache
127+
.yarn/unplugged
128+
.yarn/build-state.yml
129+
.yarn/install-state.gz
130+
.pnp.*

‎README.md

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# TJAS AluraTube (en-us 🇺🇸)
2+
3+
[![Status](https://img.shields.io/badge/status-active-brightgreen.svg)](./README.md)
4+
[![Licence MIT](https://img.shields.io/badge/licence-MIT-blue.svg)](./LICENSE.md)
5+
6+
[![Node](https://img.shields.io/badge/node-v18.12.1-green)](https://nodejs.org/en/)
7+
[![Next](https://img.shields.io/badge/next-v13.0.2-yellow)](https://nextjs.org/)
8+
[![React](https://img.shields.io/badge/react-v18.2.0-orange)](https://reactjs.org/)
9+
10+
> 🇧🇷 [Leia em Português do Brasil](./README_pt-br.md)
11+
12+
> ⚙️ Access the demo \[COMING SOON\]
13+
14+
> ⭐ Mark the project with a star
15+
16+
<br />
17+
18+
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.
19+
20+
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.
21+
22+
The **AluraTube** is a video platform inspired by [YouTube](https://www.youtube.com/). 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.
23+
24+
<br />
25+
26+
<p align="center">
27+
<img alt="Project Header" src="./screenshots/header.png" />
28+
<img alt="Project Header" src="./screenshots/footer.png" />
29+
</p>
30+
31+
<br />
32+
33+
## Build With
34+
35+
- Node.JS 18.12.1 + npm 8.19.2
36+
- Next.JS 13.0.2
37+
- React.JS 18.2.0
38+
- React DOM 18.2.0
39+
- React Icons 4.6.0
40+
- Styled Components 5.3.6
41+
42+
## Getting Started
43+
44+
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:
45+
46+
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/);
47+
2. Make sure you have Git installed or do it from [Git-scm.com](https://git-scm.com/);
48+
3. Access the folder you want to save the project, then clone the repo there
49+
```sh
50+
git clone https://github.com/tjas/tjas-aluratube
51+
```
52+
4. Access the project folder;
53+
5. Install the project dependencies (obtained by default from `package.json` file)
54+
```sh
55+
npm install
56+
```
57+
6. Run the application
58+
```sh
59+
npm run dev
60+
```
61+
7. Finally, access the aplication at http://localhost:3000
62+
63+
## Contributing
64+
65+
> Obtained and adapted from the "Contributing" section of Mario Souto's [Flappy Bird: Dev Soutinho](https://github.com/omariosouto/flappy-bird-devsoutinho/blob/master/CONTRIBUTING.md) project.
66+
67+
Do you want to contribute with the project?
68+
69+
1. Fork it!
70+
2. Create your feature branch: `git checkout -b my-new-feature`
71+
3. Add files changed: `git add .`
72+
4. Commit your changes: `git commit -m "Add some feature"`
73+
5. Push to the branch: `git push origin my-new-feature`
74+
6. Submit a pull request
75+
76+
- Add a title os a description that let clear your suggestion :-)
77+
78+
> After your pull request is merged, you can safely delete your branch.
79+
80+
## Todo List
81+
82+
- To obtain a list of videos dinamically from [Google API](https://www.npmjs.com/package/googleapis);
83+
- To implement fade efect in horizontal scrolls extremities;
84+
- To implement user profile informations edition;
85+
- To persist informations in local data base;
86+
- To implement multi language translation.
87+
88+
## References
89+
90+
- [Node.JS LTS version](https://nodejs.org/en/);
91+
- [npm documentation](https://docs.npmjs.com/);
92+
- [Visual Studio Code](https://code.visualstudio.com/);
93+
- [Material Design components](https://m3.material.io/components);
94+
- [React.JS documentation](https://reactjs.org/docs/getting-started.html);
95+
- [Next.JS documentation](https://nextjs.org/docs/getting-started);
96+
- [Styled Components documentation](https://styled-components.com/docs);
97+
- [Vercel's GitHub profile](https://github.com/vercel);
98+
- [Styled Components official using examples](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components);
99+
- [next.config.js file of Styled Components examples](https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/next.config.js);
100+
- [Alura's Github "Alura Challenges" profile](https://github.com/alura-challenges).
101+
102+
## Contact
103+
104+
- **Thiago Jorge Almeida dos Santos** | [LinkedIn](https://www.linkedin.com/in/thiago-tjas) | [GitHub](https://github.com/tjas) .
105+
106+
## Licence
107+
108+
- Distributed under [MIT License](./LICENSE.md).
109+
110+
## Acknowledgements
111+
112+
- **Mario Souto**, Instructor at Alura's React Immersion, for sharing his knowledge at React Immersion | [LinkedIn](https://www.linkedin.com/in/omariosouto/) | [YouTube](https://www.youtube.com/c/DevSoutinho) | [GitHub](https://github.com/omariosouto) | [Instagram](https://www.instagram.com/devsoutinho/) .
113+
- **Nayanne Lopes**, Instructor at Alura, for contributing at React Immersion comparing React and Angular | [LinkedIn](https://www.linkedin.com/in/nayannebatista/) | [Instagram](https://www.instagram.com/nayanne.tech/) .
114+
- **Paulo Silveira**, Co-founder and CEO of Alura, for idealizing and creating the React Immersion | [LinkedIn](https://www.linkedin.com/in/paulosilveira/) | [Instagram](https://www.instagram.com/paulo_hipster/) .

‎README_pt-br.md

+114
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
# TJAS AluraTube (pt-br 🇧🇷)
2+
3+
[![Status](https://img.shields.io/badge/status-ativo-brightgreen.svg)](./README_pt-br.md)
4+
[![Licence MIT](https://img.shields.io/badge/licença-MIT-blue.svg)](./LICENSE.md)
5+
6+
[![Node](https://img.shields.io/badge/node-v18.12.1-green)](https://nodejs.org/pt-br/)
7+
[![Next](https://img.shields.io/badge/next-v13.0.2-yellow)](https://nextjs.org/)
8+
[![React](https://img.shields.io/badge/react-v18.2.0-orange)](https://pt-br.reactjs.org/)
9+
10+
> 🇺🇸 [Read in English](./README.md)
11+
12+
> ⚙️ Acesse a demo \[EM BREVE\]
13+
14+
> ⭐ Marque o projeto com uma estrela
15+
16+
<br />
17+
18+
Este projeto é uma adaptação e evolução do projeto **[AluraTube](https://github.com/alura-challenges/aluratube)**, proposto no 5ª **Imersão React** da [Alura](https://www.alura.com.br/), que ocorreu em novembro de 2022. Inicialmente ele tinha como objetivo divulgar conhecimentos básicos sobre a tecnologia [React.JS](https://pt-br.reactjs.org/), mas tornou-se uma oportunidade de praticar e desenvolver habilidades pessoais nessa tecnologia e em outras relacionadas.
19+
20+
O **React** é uma biblioteca [JavaScript](https://www.javascript.com/) criada pelo Facebook para construir interfaaces de usuário modernas, conhecidas como aplicações _front-end_, as quais são conectadas a aplicações _back-end_, que servem conteúdo e gerenciam regras negociais em sistemas complexos. O React roda sobre o [Node.JS](https://nodejs.org/pt-br/), um ambiente de execução JavaScript multi plataforma de código aberto, e é potencializado por outras bibliotecas e _frameworks_, principalmente o [Next.JS](https://nextjs.org/), um _framework_ muito popular, que também é utilizado neste projeto.
21+
22+
O **AluraTube** é uma plataforma de vídeos inspirada no [YouTube](https://www.youtube.com/). Alura e AluraTube são marcas registradas da _AOVS Sistemas de Informática S.A._, todos os direitos reservados. YouTube é uma marca registrada da _Google LLC_, todos os direitos reservados.
23+
24+
<br />
25+
26+
<p align="center">
27+
<img alt="Project Header" src="./screenshots/header.png" />
28+
<img alt="Project Header" src="./screenshots/footer.png" />
29+
</p>
30+
31+
<br />
32+
33+
## Desenvolvido Com
34+
35+
- Node.JS 18.12.1 + npm 8.19.2
36+
- Next.JS 13.0.2
37+
- React.JS 18.2.0
38+
- React DOM 18.2.0
39+
- React Icons 4.6.0
40+
- Styled Components 5.3.6
41+
42+
## Utilização
43+
44+
Este é um exemplo de como você pode configurar o projeto localmente no seu computador. Para obter uma cópia local funcionando, siga estas etapas:
45+
46+
1. Certifique-se de que você tem o Node.JS 18.12.1+ com o npm 8.19.2+ instalado ou verifique como fazê-lo em [NodeJS.org](https://nodejs.org/pt-br/download/);
47+
2. Certifique-se de que você tem o Git instalado ou verifique como fazê-lo em [Git-scm.com](https://git-scm.com/);
48+
3. Acesse a pasta na qual você deseja salvar o projeto, então, clone o repositório nesta pasta
49+
```sh
50+
git clone https://github.com/tjas/tjas-aluratube
51+
```
52+
4. Acesse a pasta do projeto;
53+
5. Instale as dependências do projeto (obtidas, por padrão, do arquivo `package.json`)
54+
```sh
55+
npm install
56+
```
57+
6. Execute a aplicação
58+
```sh
59+
npm run dev
60+
```
61+
7. Finalmente, acesse a aplicação no endereço http://localhost:3000
62+
63+
## Contribuição
64+
65+
> Obtido e adaptado da seção "Contribuindo" do projeto [Flappy Bird: Dev Soutinho](https://github.com/omariosouto/flappy-bird-devsoutinho/blob/master/CONTRIBUTING.md) do Mario Souto.
66+
67+
Quer contribuir com o projeto?
68+
69+
1. Crie um fork!
70+
2. Crie sua feature branch: `git checkout -b my-new-feature`
71+
3. Adicione os arquivos modificados: `git add .`
72+
4. Faça um Commit com suas alterações: `git commit -m "Add some feature"`
73+
5. Faça um push da sua branch: `git push origin my-new-feature`
74+
6. Envie um Pull Request para esse repositório
75+
76+
- Adicione um título e uma descrição que deixe claro sua sugestão :-)
77+
78+
> Depois que seu pull request for mergeado, você pode apagar sua branch.
79+
80+
## Lista de tarefas a serem realizadas
81+
82+
- Implementar a obtenção uma lista de vídeos dinamicamente por meio da [Google API](https://www.npmjs.com/package/googleapis);
83+
- Implementar o efeito de _fade_ nas extremidades dos _scrolls_ horizontais;
84+
- Implementar a edição das informações de usuário;
85+
- Persistir informações em base de dados local;
86+
- Implementar tradução em outros idiomas.
87+
88+
## Referências
89+
90+
- [Versão LTS do Node.JS](https://nodejs.org/pt-br/);
91+
- [Documentação do npm](https://docs.npmjs.com/);
92+
- [Visual Studio Code](https://code.visualstudio.com/);
93+
- [Componentes do Material Design](https://m3.material.io/components);
94+
- [Documentação do React.JS](https://pt-br.reactjs.org/docs/getting-started.html);
95+
- [Documentação do Next.JS](https://nextjs.org/docs/getting-started);
96+
- [Documentação do Styled Components](https://styled-components.com/docs);
97+
- [Conta da Vercel no GitHub](https://github.com/vercel);
98+
- [Exemplo oficial de utilização do Styled Components](https://github.com/vercel/next.js/tree/canary/examples/with-styled-components);
99+
- [Arquivo next.config.js dos exemplos de Styled Components](https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/next.config.js).
100+
- [Conta "Alura Challenges" da Alura no GitHub](https://github.com/alura-challenges).
101+
102+
## Contato
103+
104+
- **Thiago Jorge Almeida dos Santos** | [LinkedIn](https://www.linkedin.com/in/thiago-tjas) | [GitHub](https://github.com/tjas) .
105+
106+
## Licença
107+
108+
- Distribuído sob a [Licença MIT](./LICENSE.md).
109+
110+
## Agradecimentos
111+
112+
- **Mario Souto**, Instrutor da Imersão React da Alura, por compartilhar o seu conhecimento na Imersão React | [LinkedIn](https://www.linkedin.com/in/omariosouto/) | [YouTube](https://www.youtube.com/c/DevSoutinho) | [GitHub](https://github.com/omariosouto) | [Instagram](https://www.instagram.com/devsoutinho/) .
113+
- **Nayanne Lopes**, Instrutora na Alura, por contribuir na Imersão React com as comparações entre React e Angular | [LinkedIn](https://www.linkedin.com/in/nayannebatista/) | [Instagram](https://www.instagram.com/nayanne.tech/) .
114+
- **Paulo Silveira**, Co-fundador e CEO da Alura, por idealizar e conduzir a Imersão React | [LinkedIn](https://www.linkedin.com/in/paulosilveira/) | [Instagram](https://www.instagram.com/paulo_hipster/) .

0 commit comments

Comments
 (0)