/nike-store-finder

Web app was built with React.js, JavaScript, and TypeScript, consuming Geolocation and Directions APIs from Google Maps to find nearby Nike stores in Toronto, ON.

Primary LanguageTypeScriptMIT LicenseMIT

Nike Store Finder

React Boilerplate Meets CRA


Crafted for highly scalable & performant and easily maintainable React.js applications
with a focus on best DX and best practices using React Boilerplate CRA Template.

— It uses Google Geolocation and Directions API to find Nike Stores (from Brazil) near with delivering times (mocked data).

📚 Documentation: Gitbook
📱 Live Website: https://nike-stores-finder.netlify.app/

nike-stores-finder netlify app_ (1)

Install & Start

⚠️ Using Yarn Package Manager is recommended over npm. Use at least Node.js v14 or higher.

git clone --depth=1 git@github.com:IndianBoyBR/NikeStore-Finder-ReactJS.git

cd NikeStore-Finder-ReactJS

yarn install

Start with live reload (for development mode):

yarn start

Folders & Files Structure

src
├── app
│   ├── components                   # UI Components (Atomic Design concept)
│   │   ├── atoms
│   │   ├── hocs                     # HOCs (High Order Components)
│   │   ├── molecules
│   │   └── organisms
│   ├── configs                      # Configuration files
│   ├── hooks                        # Custom React.js Hooks
│   ├── pages                        # Pages
│   └── styles                       # Setup themes, styles
│       └── themes
│           └── light-theme.ts
├── locales                          # Setup i18n
│   └── pt
├── mocks                            # Mocks (msw)
├── store                            # Configuration for @reduxjs/toolkit store
├── types                            # Interfaces, types
└── utils                            # Utilities, helpers

Features

Predictable state management
Unidirectional data flow allows for change logging and time travel debugging.
Instant feedback
Enjoy the best DX (Developer eXperience) and code your app at the speed of thought! Your saved changes to the CSS and JS are reflected instantaneously without refreshing the page. Preserve application state even when you update something in the underlying code!
Next generation CSS
Write composable CSS that's co-located with your components for complete modularity. Unique generated class names keep the specificity low while eliminating style clashes. Ship only the styles that are on the page for the best performance.
Industry-standard routing
It's natural to want to add pages (e.g. `/about`) to your application, and routing makes this possible.
Industry-standard i18n internationalization support
Scalable apps need to support multiple languages, easily add and support multiple languages.
Typescript
Typescript is the key to scalability. Build self-documented code, easy-to-debug code and create maintainable large applications and codebases with a highly productive development experience.
Quick scaffolding
Create components, containers, routes, selectors and sagas - and their tests - right from the CLI!
Static code analysis
Focus on writing new features without worrying about formatting or code quality. With the right editor setup, your code will automatically be formatted and linted as you work.
SEO
We support SEO (document head tags management) for search engines that support indexing of JavaScript content. (eg. Google)

Keywords: Create React App, React Boilerplate, Custom Template, Typescript, React.js, Redux, Hot Reloading, ESNext, Babel, Storybook, react-router, styled-components, redux-saga, FontFaceObserver

License

This project is licensed under the MIT license, Copyright (c) 2023 IndianBoyBR. For more information see LICENSE.