Skip to content

Uma simples página de e-commerce fictício de produtos geek com login, criação, edição e exclusão de produtos. Desenvolvido com o propósito de estudar EJS e SQLite3.

Notifications You must be signed in to change notification settings

sucodelarangela/alura-geek

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Alura Geek: site de E-Commerce | 3º Challenge Front-end Alura

Read it in English

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

Detalhes do projeto

⚙️ Como usar

Se você optou por experimentar a aplicação rodando-a localmente em seu computador, siga as etapas a seguir:

  1. 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
  1. Acesse a pasta do projeto com seu terminal;

  2. Rode o comando npm install para instalar as dependências (você precisa ter o Node.js instalado);

  3. Para iniciar a aplicação, rode o comando npm start no terminal. Você deve receber a seguinte mensagem de confirmação:

npm start

> alura-geek@1.0.0 start
> node .

APP RUNNING ON PORT 3000
  1. Para usar a aplicação, abra o seu browser preferido e acesse o endereço http://localhost:3000/

  2. Para fazer o login de administrador na página, utilize os seguintes dados:

E-mail: admin@email.com
Senha: 12345aZ

🦾 Sobre o desafio

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.

📈 Etapas do projeto

  • 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.

🛡️ Badges recebidas pelo projeto

Badge de Participação Badge de Apoio
à Comunidade

🔼 Voltar ao topo


English version

🔎 Overview

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.

⚙️ How to use it

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:

  1. 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
  1. Access the project root folder on your terminal;

  2. Run npm install to install all project dependencies (you must have Node.js installed);

  3. To start the application, run npm start on yout terminal. You should receive the following message:

npm start

> alura-geek@1.0.0 start
> node .

APP RUNNING ON PORT 3000
  1. To use the app, open your favorite browser and go to the URL http://localhost:3000/

  2. To log in as admin, use the following data:

E-mail: admin@email.com
Password: 12345aZ

🦾 About the challenge

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.

📈 Project stages

  • 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).

🛡️ Badges received in this project

Participation Badge Community
Support Badge

🔼 Back to top


Developed with 🧡 by @sucodelarangela 🍊

About

Uma simples página de e-commerce fictício de produtos geek com login, criação, edição e exclusão de produtos. Desenvolvido com o propósito de estudar EJS e SQLite3.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published