/lilys-cuisine

This repository was created for the React Frontend Challenge from Alkemy (Deployment currently not working because of 'Mixed Content' error).

Primary LanguageJavaScript

English Version

Lily's Cuisine

This project was created for an Alkemy's assignment.

Note About .env File

This file was uploaded to the repository to showcase its function in the project, but it should actually be added to the .gitignore file so it remains hidden.

Guide

To fully access the project's content, follow this guide:

Log In

Email: challenge@alkemy.org

Password: react

Other emails or passwords won't be successful when trying to login.

Try Changing the Name

When you first enter the Home component, you can change your name by clicking on the edit icon next to the greeting in the navigation bar (upper right corner).

Note: the name must be between 1 and 13 characters long.

Menu Rules

I - You can only add two vegan and two non vegan meals to the menu.

II - You can only order the menu when having exactly four meals.

Note: When trying otherwise, an alert will be displayed, warning the user.

Project Details

This project was created using React, ReactDOM, react-router-dom, Formik, Axios, SweetAlert2, Bootstrap, React-Bootstrap, Jest, and more!

My Personal Journey

The project helped me understand many things, and learn some I didn't know existed.

Formik

Initially, the form was made in a traditional way, using plain HTML elements, but it was later replaced using Formik.

Even though it was hard to learn a new library for manipulating forms, the result was a lot cleaner and easier to handle.

SweetAlert2

This too, was a new technology for me, but a most welcome one. It was very helpful, easy to handle, and pretty.

Axios & react-router-dom

The Axios calls and the react-router-dom components (such as BrowserRouter, Redirect, Route, Switch) were also very helpful.

I'm looking forward to learn more about them in the future.

Versión en Español

Lily's Cuisine

Este proyecto fue creado en base a una tarea de Alkemy.

Nota Sobre el Archivo .env

Este archivo fue subido al repositorio para poder demostrar su papel en el proyecto, pero en realidad debería ser añadido al archivo .gitignore para que se mantenga oculto.

Guía

Para poder acceder a todo el contenido del proyecto, sigue la siguiente guía:

Autenticación

Email: challenge@alkemy.org

Contraseña: react

Estas son las únicas credenciales válidas para ingresar.

Intenta Cambiar el Nombre

Cuando ingresás por primera vez al componente Home, podés cambiar tu nombre al clickear en el ícono de edición al lado del mensaje de saludo en la barra de navegación (esquina superior derecha).

Nota: el nombre debe tener entre 1 y 13 caracteres de largo.

Reglas del Menú

I - Podés agregar solamente dos comidas veganas y dos no veganas al menú.

II - Solo podrás ordenar una vez que tengas cuatro comidas seleccionadas en el menú.

Nota: Si intentás realizar una acción restringida, se mostrará una alerta indicando que la misma no es posible.

Detalles del Proyecto

Este proyecto fue creado usando React, ReactDOM, react-router-dom, Formik, Axios, SweetAlert2, Bootstrap, React-Bootstrap, Jest, y más!

Mi Viaje Personal

El proyecto en sí me ayudó a entender varias cosas, y a aprender muchas otras que no sabía siquiera que existían.

Formik

Inicialmente, el formulario fue hecho de forma tradicional con elementos de HTML, pero más adelante, fue reemplazado usando Formik.

A pesar de las dificultades que representó el aprender una nueva librería para el manejo de formularios, el resultado final fue mucho más limpio y fácil de manejar.

SweetAlert2

Esta tecnología, al igual que Formik, fue nueva para mí, pero fue de gran ayuda, fácil de manejar, y muy linda.

Axios & react-router-dom

Las llamadas con Axios y los componentes de react-router-dom (como BrowserRouter, Redirect, Route, Switch) fueron de mucha ayuda, definitivamente volveré a usar estas tecnologías, y espero con ansias aprender más acerca de ellas.