Live Version
This is the Final Capstone Project for Microverse Complete Technical Curriculum. The implementation was completely built with React, using the Create React App command, and with Redux architecture, for managing the internal state of the applicacion.
The purpose of the project is to follow industry standards and present a complete application for booking appointments with the given design and requirements for its behaviour. As well we should choose a nice to have requirement, for Tiltzin I choose to work on transitions for making the user experience better, and in general, I worked in the front end design, as well as in the user authentication. In order to achieve all of this we should implement the best practices learned throught the program.
The complete project's assignment can be seen here.
The link for the back end repository can be found here.
Tiltzin is an application por medium and large screens, it's layout works up 650px, it tries to be a tourism agency but wants to be something more, its an application that allows you to connect with indigenous and ethnic people in order to be a responsible traveller, and/or tourist, with the natural environment and culture of the desired destiny, you can reserve a day for meeting and a family that belongs to the culture heritage of the area will be responsible of the lead activies booked for that destiny.
The style and desgin of the page was made thinking in the colors that represents the imaginery of indigenous ethnic groups of people in Mexico, but at the same time, it mix a much more modern approach in order to make it attractive to the eye.
In Tiltztin you need to sign up or sign in the same as you regularly do it in normal applications, a form will be displayed if you click on the Sign in or in Sign up link in the navigation bar of the landing page.
After joining in Tiltzin you'll se the dashboard with different pages that you can click on.
You'll be received with the Home page, with a welcome message and instructions for navigating throught the dashboard.
If you click the the destinies button, all the destinies registered in Tiltzin will be display in a slider, you can go to the left or the right as you please, looking at the photographs of our destinies.
By clicking in the know more button of every destiny you can see the details of the activies and reserve a day for the activities.
In the achievements section all the reserved days from all of the users will be displayed.
Right now, as is it made, Tiltzin lacks of a sessions proper storage due to a problem with the domain name, you have to sign in everytime you reload the page, this problem will be fixed in the future, once the domain is available.
The same problem persists in the appointments sections, once the problem with the sessions is resolved, the appointments will be filtered only for the current user that logged in.
- Click on the green button, in the repository.
- Add the following commands in your favorite bash:
git clone [copied text]
cd [repo name]
npm i
npm start
A tab will be opened in your default browser.
In the project directory, you can run, in your favorite bash:
1.- For activate the web-server watcher ./bin/webpack-dev-server
2.- For starting the web-server npm start
3.- For installing dependencies npm i
4.- Outside the web-server, for running tests npm test
For running the app in the development mode after following the steps number 2 and 3.
Open http://localhost:3000 to view it in the browser.
- React.js
- Redux
- Redux Dev Tools
- React-Router-Dom
- Axios
- JSX
- Styled Components
- Prop-Types
- CSS
- Heroku
- ES6
- npm
- Eslint
🙍 Guadalupe Rangel - kanemekanik@gmail.com - ☄
You liked it? ⭐️ Star the project!!!
Any comment that you want to send I'll be happy to receive it.
This project is for learning purposes. I don't own any image presented here.