Skip to content

SteveSayantan/React-Starters

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

My React Projects

This repo contains a handful of small React projects that I've been working on.

Birthday Buddy

This project allows users to add and remove birthdays from a list. The project uses the useState hook to store the list of birthdays in memory. Users can clear the list by clicking the "Clear All" button.

Tours

This project allows users to view a list of tours . The project uses the useState hook to store the list of tours in memory. Users can read the description of each tour by clicking on the Read More button. If not interested in, a particular tour can be removed by clicking on Not Interested.

Reviews

This project allows users to view a list of reviews for a product. User can read other reviews by clicking on the Next or Previous button. Clicking on Surprise Me gives a random review.

Accordion

This project allows users to view a list of FAQs and expand the sections to view the answers. Users can expand a section by clicking the "+" button next to the section title.

Menu

This project allows users to view a list of menu items. Users can also choose items from different categories.

Tabs

This project allows users to view a list of tabs and switch between them. Users can switch to a different tab by clicking on the tab title.

Slider

It is basically a slider component. New slide appear automatically after 3 seconds. User can also change slides manually by clicking on the Next or Previous button .

Lorem Ipsum

This project generates Lorem Ipsum text. Users can enter the number of paragraphs and click on Generate to generate text blocks.

Color Generator

This project generates a random color. The project uses the useState hook to store the random color in memory. The color is generated by calling the generateColor() function, which is defined in the ColorGenerator.js file.

Grocery Bud

This project allows users to create a grocery list and add items to it. The project uses the useState hook to store the grocery list in memory. Users can add an item to the grocery list by entering the item name in the input field and clicking the "Add Item" button.

Navbar

This project creates a simple navbar with links to different pages. The project uses the useState hook to store the active page in memory. Users can navigate to a different page by clicking on the corresponding link in the navbar.

Sidebar

This project creates a simple sidebar with links to different pages. The project uses the useState hook to store the active page in memory. Users can navigate to a different page by clicking on the corresponding link in the sidebar.

Strapi Submenus

This project uses the Strapi CMS to create a set of submenus. The project uses the useState hook to store the list of submenus in memory. The submenus are created by calling the createSubmenus() function, which is defined in the StrapiSubmenus.js file.

Cart

This project allows users to add items to a cart and checkout. The project uses the useState hook to store the cart in memory. Users can add an item to the cart by entering the item name and quantity in the input fields and clicking the "Add Item" button. Users can checkout by clicking the "Checkout" button.

Cocktails

Clubhouse Cocktail" is a vibrant and engaging website designed to bring cocktail enthusiasts together in a virtual space. Featuring a curated collection of cocktail recipes, mixology tips, and interactive forums, this platform encourages users to explore and share their love for mixology.

Take a look at it

Markdown Preview

"Markdown Preview Online" is a convenient and user-friendly web application that allows users to create, edit, and preview Markdown documents in real-time. With a clean and intuitive interface, this tool makes it easy for writers, bloggers, and developers to format text, add images, create lists, and more using Markdown syntax.

Take a look at it

To run the projects

You can run the projects by cloning the repo and then running the following commands in the project directory:

npm install
npm start

This will start a development server on port 3000. You can then open the project in your browser by visiting http://localhost:3000.

Make sure to import the main file (a file that contains 'source' in its name) and the css file from the corresponding project in index.js.

To contribute

If you'd like to contribute to the projects, please fork the repo and then submit a pull request.

Thanks for checking out my projects! Don't forget to drop a star ⭐.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published