Waves 🌊

Web Application where users can search and find what they need

Live demo here.

Table of Contents

• Technologies Used
• Getting Started
• Screenshot
• Usage
• Project Status
• Deployment
• Author
• Acknowledgements

Technologies Used

• React - the JS library to create web and native user interfaces
• Tailwind - A utility-first CSS framework designed to rapidly build modern looking websites
• HTML - markup language used to create web pages, basic building block
• JavaScript - popular lighweight programming language
• Vite - Development environment
• VSCode - Free code editor
• Google Custom Search Engine - Search engine showing search results page and images
• Git/GitHub - GitHub is the place to store your projects while Git is a version control tool
• Postman - used to test API endpoints

Getting Started

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.

Prerequisites

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 run dev 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) after running npm install.
  • 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 or npm install, this page can help and you can search the package you need

Screenshot

Previous Design:

Current Design:

Usage

How does one go about using it?

User can navigate to landing page and see a input bar to search the web

User can see a navbar with a hamburger menu and two links

User can see their results on a search results page

Project Status

• Project is: being re-designed

• Project is begin re-designed to become more responsive on all devices, modern but clean and screen reader friendly

Deployment

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 because of Vite for creating this project and not Create React App (CRA).

Setup on Vercel

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

Author

• Created by @el634dev

Acknowledgements

• This project was inspired by Ecosia
• Hat tip to this video Build & Deploy Google Search Application