Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sucodelarangela/alura-geek

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.
https://github.com/sucodelarangela/alura-geek

alura alurachallenge alurachallengefront3 alurachallengefrontend challenge css desafio desafioalura ejs express javascript node sqlite3 vitrinedev

Last synced: 2 months ago
JSON representation

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.

Awesome Lists containing this project

README 

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






_[Read it in English](#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](https://www.alura.com.br).



**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**](#challenge).



| 🪧 Vitrine Dev |   |

| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| ✨ Nome        | **Alura Geek** - Challenge Alura |

| 🏷️ Tecnologias | Node, Express, SQLite3, EJS, CSS, JavaScript |

| 🚀 URL         | [**Acesse o site**](https://alurageek.glitch.me/) ou veja como rodar localmente em [**⚙️ Como usar**](#howto) |

| 🔥 Desafio     | [**Protótipo do Figma**](https://www.figma.com/proto/itJpWbvHxSUcUeMPy1lmof/AluraGeek?node-id=55%3A1104&scaling=scale-down&page-id=0%3A1&starting-point-node-id=55%3A1104) |



![](https://raw.githubusercontent.com/sucodelarangela/alura-geek/master/public/images/og-image.png#vitrinedev)



## 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

```



2. Acesse a pasta do projeto com seu terminal;



3. Rode o comando `npm install` para instalar as dependências (você precisa ter o [Node.js](https://nodejs.org/en/download/) instalado);



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



```

npm start



> [email protected] start

> node .



APP RUNNING ON PORT 3000

```



5. Para usar a aplicação, abra o seu browser preferido e acesse o endereço `http://localhost:3000/`



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



```

E-mail: [email protected]

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](https://www.alura.com.br) 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.](https://www.figma.com/proto/itJpWbvHxSUcUeMPy1lmof/AluraGeek?node-id=55%3A1104&scaling=scale-down&page-id=0%3A1&starting-point-node-id=55%3A1104)



### ⚙️ 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

```



2. Access the project root folder on your terminal;



3. Run `npm install` to install all project dependencies (you must have [Node.js](https://nodejs.org/en/download/) installed);



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



```

npm start



> [email protected] start

> node .



APP RUNNING ON PORT 3000

```



5. To use the app, open your favorite browser and go to the URL `http://localhost:3000/`



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



```

E-mail: [email protected]

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 🍊](https://angelacaldas.vercel.app)