Olá, devs!
Neste repositório você encontrará uma página de e-commerce (versão do administrador) para uma loja online de produtos geek chamada Alura Geek, que foi desenvolvida como resultado de um Desafio Front-End (3ª edição) exclusivo para alunos da escola de tecnologia Alura.
Devido à limites impostos pelo serviço de hospedagem, o carregamento inicial da página pode levar alguns segundos.
Você pode saber um pouco mais como funcionam os challenges da Alura visitando a seção 🦾 Sobre o desafio.
| 🪧 Vitrine Dev | |
|---|---|
| ✨ Nome | Alura Geek - Challenge Alura |
| 🏷️ Tecnologias | Node, Express, SQLite3, EJS, CSS, JavaScript |
| 🚀 URL | Acesse o site ou veja como rodar localmente em ⚙️ Como usar |
| 🔥 Desafio | Protótipo do Figma |
Se você optou por experimentar a aplicação rodando-a localmente em seu computador, siga as etapas a seguir:
- Faça o download deste repositório através do botão verde Code no topo da página e, em seguida, clicando em Download ZIP. Ou, se preferir, através do terminal (Git Bash, Powershell, etc.), use o comando:
git clone https://github.com/sucodelarangela/alura-geek.git
-
Acesse a pasta do projeto com seu terminal;
-
Rode o comando
npm installpara instalar as dependências (você precisa ter o Node.js instalado); -
Para iniciar a aplicação, rode o comando
npm startno terminal. Você deve receber a seguinte mensagem de confirmação:
npm start
> [email protected] start
> node .
APP RUNNING ON PORT 3000
-
Para usar a aplicação, abra o seu browser preferido e acesse o endereço
http://localhost:3000/ -
Para fazer o login de administrador na página, utilize os seguintes dados:
E-mail: [email protected]
Senha: 12345aZ
O Desafio simula um ambiente de trabalho real, com tarefas exigidas pelos designers por meio de cartões no Trello. É necessário comunicar-se e entender o que os designers realmente querem de cada tarefa, podemos escolher a tecnologia que desejarmos para desenvolver o código. Podemos, também, adicionar recursos e sugerir modificações.
Não há aulas específicas para o desafio, por isso devemos desenvolver com o conhecimento que temos. As instrutoras preparam um plano de estudos com dicas de conhecimentos que podemos precisar caso precisemos fazer algo e não saibamos exatamente como fazer, mas é nossa responsabilidade buscar e trocar informações com outros desenvolvedores para realizar o trabalho.
O Desafio dura 4 semanas. Todas as segundas-feiras durante 3 semanas receberemos novos trabalhos dos designers e devemos desenvolver o que foi pedido. Na semana 4, estamos livres para implementar novos recursos ou brincar com estilos e outros questões de aparência.
O Desafio começou em 14 de março de 2022.
- Semana 1: Desenvolvimento das estruturas e estilizações. No meu caso, escolhi desenvolver em HTML e CSS.
- Semana 2: Implementação do Node.js, Express e EJS para modificar dinamicamente o HTML.
- Semana 3: Validações dos formulários (login, contato e cadastro de produtos), criação de rotas e controllers e implementação do banco de dados.
- Semana 4: Finalização do projeto com cadastro dos itens no banco de dados e funcionalidade de adicionar mais produtos e/ou editar produtos existentes.
|
|
| Badge de Participação | Badge de Apoio à Comunidade |
English version
Hello, devs!
In this repo you will find an e-commerce page (admin version) for a geek store named Alura Geek, which was development as a result of a Front-End Challenge (3rd edition) exclusively for students of Alura tech school.
Due to limitations from the hoster service, the initial loading of the page may take a few seconds.
The original prototype on Figma can be seen in this link.
You can test the page by clicking the link on the top of this README, but as it is a serverless deploy on Heroku, some functionalities may not work properly (i.e. inserting or editing a product in database). However, if you just want to browse the application, it is perfectly fine.
For full access to the app functionalities, you can run it locally on your machine. In order to do so, follow the steps below:
- Download this repository by clicking the green Code button on top of the page and then clicking Download ZIP option. Or use the following command on your terminal (Git Bash, Powershell, etc.):
git clone https://github.com/sucodelarangela/alura-geek.git
-
Access the project root folder on your terminal;
-
Run
npm installto install all project dependencies (you must have Node.js installed); -
To start the application, run
npm starton yout terminal. You should receive the following message:
npm start
> [email protected] start
> node .
APP RUNNING ON PORT 3000
-
To use the app, open your favorite browser and go to the URL
http://localhost:3000/ -
To log in as admin, use the following data:
E-mail: [email protected]
Password: 12345aZ
The Challenge simulates a real work environment, with tasks required by the designers via Trello cards, so students may experience how a real job feels like. It is necessary to communicate and understand what the designers really want from each task, we can choose the technology that best apply for us to develop the code. We can add features and suggest modifications in case we have better ideas and so on.
There are no specific classes for the challenge, so we must go on with the knowledge we have. The instructors prepare a study plan with tips of things we might need in case we wish to do something and don't know exactly how to do it, but it is our part to seek and exchange info with other developers to get the job done.
The Challenge lasts 4 weeks. Every Monday for 3 weeks we will receive new assignments from the designers and should develop what was asked. On week 4 we are free to implement new features or play with styles and othe appearances feats.
The Challenge started at March 14th, 2022.
- Week 1: Development of structure and style. In my case, I have chosen to develop the page using HTML and CSS and soon the HTML page will change content dinamically with EJS.
- Week 2: Implementation of Node.js, Express and EJS to dinamically change HTML content when navigating the website.
- Week 3: Form validations (login, contact and product registration), creation of routes and controllers and implementation of database.
- Week 4: Project conclusion (products registered in database and new product registration/edition functionality).
|
|
|
| Participation Badge | Community Support Badge |
Developed with 🧡 by @sucodelarangela 🍊