Giter Club home page Giter Club logo

express_groomer-teama-fe's Introduction

Express-Groomer

  • Express Groomer connects groomers and clients. The connection allows for groomers to meet at the clients residence or to meet at the groomers residence. Clients have the ability to safely schedule an appointment and groomers can grow their business. Clients have the ability to search for groomers in their based on particular criteria. Groomers can manage appointment requests from users. Groomers will be able to schedule appointments. All of the features of the application are designed to empower both clients and groomers. The former will be empowered to search out for great care for their animals, and the ladder will be empowered meet wonderful clients and their animals for great pay.

  • Our Express Groomer applications' Notion document can be found here (https://www.notion.so/Express-Groomer-Build-On-171e358c0a2f49019572d0afa7ff5ba0).

  • The following was built using Create React App for base boiler-plating. We will maintain the dependencies as according to their specifications as an Engineering Organization.

About the Software Configuration Powering the Application

StoryBook

Requirements

Getting Started

Environment Variables

  • REACT_APP_CLIENT_ID Okta client id
  • REACT_APP_OKTA_ISSUER_URI Okta api authorization server issuer uri (eg. https://name-438r8hr.okta.com/oauth2/default)
  • REACT_APP_API_URI The URL (localhost or live) for the Backend that you're building

Setup Steps

  • Fork and clone the repo to install it as your own remote.
  • run: npm install to download all dependencies.
  • run: npm start to start your local development server.

When using Okta for authentication, the app will need to run locally on port 3000.

Errors on Deploy

  • Are you seeing an error on npm start that looks something like this? npm start fail

  • Head over to the package.json file and please modify your scripts in order to allocate more memory for the 'craco' package. More information on 'craco' and why we use it can be found here.

"start": "craco --max_old_space_size=4096 start",
"build": "craco --max_old_space_size=4096 build",

Deploying Your App

  • Your front end is to be deployed using AWS amplify. You can find a step-by-step deployment guide here.
  • Your engineering manager will ensure that you have the credentials you need to get your app deployed.

Components

  • We feel that you shouldn't have to spend time as a developer worrying about where your files should go and your architectural decisions that you'd have to make if you started from scratch.
  • Following the patterns we've laid out for your and the definitions of 'components' will help you focus on getting work done, rather than spending time deliberating on 'how' your work will get done.
  • Please see the following documentation on how to work with and structure your components in this app.

Styling Your App

  • In order to provide an experience for you to dive right into a code base and have everything you need to successfully style and craft your UI Components we'd like for you to gain some practice using the ANT Design Library.

  • Instructions on how to use components can be found in the notes portion in the project storybook.

  • It is recommended that you use the AntD components as your common components.

Theming your App

  • Even though you're using Ant Design and the global stylesheet that comes with it, you can control the theme of your application by changing things like font-family, sizes, border-radius', primary/accent colors etc.

  • To do this, simply go to the theme-overrides.js file and use the following properties to override the styles

  • You will need to restart your app completely restart your dev server when making changes to this JS file

Testing your App

Contributing

  • As this repository is a Work In Progress (WIP) we'd love to hear more about what is working for you and what could be improved. Please use the Issues tab in Github to submit and file any issues that come up during your development cycle. Issues should be related to things like, documentation, bugs that come up with the existing flow, architectural discussion, suggestions for improvements, and anything that you find cumbersome about getting started and working through a product cycle using these tools.
  • Please use Labels when filing issues try and include screenshots of bugs and steps to reproduce.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.