Web Application where users can see different vacation packages
Live demo here.
- React - the JS library to create web and native user interfaces
- Tailwind - A utility-first CSS framework designed to rapidly build modern looking websites
- JavaScript - popular lighweight programming language
- Create-React-App - Development environment
- VSCode - Free code editor
- Git/GitHub - GitHub is the place to store your projects while Git is a version control tool
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
What things you need to install the software and how to install them
- First you need a code editor of your choice, I use VSCode by Microsoft then you will need the current version of Node to get your React app created and running on your local server.
- After you need to choose between Vite or Create React App if you are going to code from scratch, if not then just run
npm install
in your terminal to get your project showing after changing the directory to your project folder(should be the same name as the one you used to create the app).- a. If you choose Vite then this article can help with getting started
- b. If you choose Create React App then this doc page can help
- You may need to initilize Tailwind depending on if you use Create React App or Vite, the process is different and these doc pages will also show you how to setup your app if you choose to code from scratch.
- The rest are dependencies and those require either
npm i
ornpm install
, this page can help and you can search the package you need
![Screenshot 2024-03-18 at 5 54 04โฏPM](https://private-user-images.githubusercontent.com/84924260/313846749-77b48788-b912-4b19-81db-ad0f236228dd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjE0MzUwNzcsIm5iZiI6MTcyMTQzNDc3NywicGF0aCI6Ii84NDkyNDI2MC8zMTM4NDY3NDktNzdiNDg3ODgtYjkxMi00YjE5LTgxZGItYWQwZjIzNjIyOGRkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MjAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzIwVDAwMTkzN1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQyZDc3Y2VjYzkxZjBmYmZiMDliMjQ1MTc1YzVkNzlkODU0Yzk4ZWYzOGNmMTRjNTZiNTQ0MmJlZGUwNzhjZTQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.9W_4EzxAz9m-5MNS5X2gKru5Sr6ucadPD0OEZFsBMoY)
How does one go about using it?
User can navigate to landing page and see mutiple sections
User can see a card section with a button linking to a drop down menu
Project is: completed
To deploy this project you could run npm run build
, this creates a version of your project that is bundled and ready for production. However I used Vercel, a frontend deployment tool that is free to help deploy this project. I noticed that running npm run build
does help Vercel build your project a little faster but that could be do to me using Vite for creating this project and not Create React App(CRA).
- To create an account sign up using a third-party account such as GitHub or you could do it using a differen username and password, if you use GitHub it will deploy your project straight from GitHub
- After signup you can login or skip step 1 and log in, go to your overview where you see a space for projects and on the right side click
Add New
- After clicking on
Add New
choose what you are adding, this will be project - Then aftering the last step, if you choose GitHub you can choose your repository and click on import
- You are all done!
- Created by @el634dev