https://github.com/pktcodes/stripe-menus-react-project

Stripe Menu Project using React
https://github.com/pktcodes/stripe-menus-react-project

context-api css3 custom-hooks ecmascript6 global-context html5 javascript localdata react react-hooks stripe-menu usecontext usestate

Last synced: about 2 months ago
JSON representation

Stripe Menu Project using React

• Host: GitHub
• URL: https://github.com/pktcodes/stripe-menus-react-project
• Owner: pktcodes
• Created: 2022-08-14T21:12:41.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-08-14T22:32:26.000Z (over 2 years ago)
• Last Synced: 2024-11-08T23:57:55.320Z (3 months ago)
• Topics: context-api, css3, custom-hooks, ecmascript6, global-context, html5, javascript, localdata, react, react-hooks, stripe-menu, usecontext, usestate
• Language: CSS
• Homepage: https://react-stripe-menus-prod.netlify.app/
• Size: 413 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Stripe Menus 🎹

> PROD [Live] : https://react-stripe-menus-prod.netlify.app/

#### Stripe Menus consists of a straightforward user interface where there is a

- **Navbar**, **Hero**, **Sidebar** and **Submenu** components.

- Functionality is 

  - **`Navbar`**  consists of the title `Stripe`  logo, page menus, and `Sign in` button.

  - **`Hero`** consists of a header, paragraph, and `Start now`  button.

  - **`Sidebar`** will appear as an alternative to Navbar to show the page menus when the user is on mobile view for a flexible user experience along with a `Close` button.

  - Each **`Submenu`** is a page with a menu of `Sublinks` / `Submenus`which is implemented in a way with smooth transiton while switching instead of vertical menus.

  - Data has not been set for any of the Submenus routes but **Netlify** handles them as *Page not Found* and buttons are not given any click functionality.

- Data is handled by **`data.js`** and styles are handled by **`index.css`**

- To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm start` to start up the development server on default port 3000.

#### Languages

HTML, CSS, JavaScript, ECMAScript, React ~ Context API - Hooks ~ useState, useContext - Custom Hook ~ useGlobalContext

#### Packages

[React Icons](https://www.npmjs.com/package/react-icons)

#### Deployment / Hosting

Netlify

---

*Note: I have developed this project ~ [13] as part of React and Projects Course taught by John Smilga.*