Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahmoudmoravej/may-i-coach-web
Web UI for may i coach
https://github.com/mahmoudmoravej/may-i-coach-web
apollo-server graphql material-design oauth2 react remix tailwindcss typescript vitest
Last synced: 21 days ago
JSON representation
Web UI for may i coach
- Host: GitHub
- URL: https://github.com/mahmoudmoravej/may-i-coach-web
- Owner: mahmoudmoravej
- Created: 2023-08-11T04:12:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-26T20:34:57.000Z (9 months ago)
- Last Synced: 2024-04-26T21:28:17.159Z (9 months ago)
- Topics: apollo-server, graphql, material-design, oauth2, react, remix, tailwindcss, typescript, vitest
- Language: TypeScript
- Homepage: https://may-i-coach-web.vercel.app
- Size: 3.12 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Welcome to mAy I Coach?!
## Development
From your terminal:
```sh
yarn dev
```
This starts your app in development mode, rebuilding assets on file changes.
## Deployment
First, build your app for production:
```sh
yarn build
```
Then run the app in production mode:
```sh
yarn start
```
Now you'll need to pick a host to deploy it to.
### Deploy in Vercel
Note: Deployment happens automatically right after PR merged to main branch.
- Url: https://vercel.com/mahmoudmoravejs-projects/may-i-coach-web
### Deploy in Render.com
Note: Deployment happens automatically right after PR merged to main branch.
- Url: https://dashboard.render.com/web/srv-cmeanpf109ks73c3cpf0
### DIY
If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
Make sure to deploy the output of `remix build`
- `build/`
- `public/build/`
### Using a Template
When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over relevant code/assets from your current app to the new project that's pre-configured for your target server.
Most importantly, this means everything in the `app/` directory, but if you've further customized your current application outside of there it may also include:
- Any assets you've added/updated in `public/`
- Any updated versions of root files such as `.eslintrc.js`, etc.
```sh
cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app
```
## Generate GraphQL types
run `yarn graphql` .
- Note: You need to have the API server mentioned in process.env.GRAPHQL_SCHEMA_URL run.
- The configuration of generator comes from: https://the-guild.dev/graphql/codegen
- It reads all the \*.graphql files in your repo and generates hook for them.
- GraphQL.config is for linting graphql files.
if it fails, run `yarn graphql --verbose`
configurations are in: graphql.codegen.ts
Note: GraphQL is introspective. This means you can query a GraphQL schema for details about itself.
## Helps / Docs
- GraphQL Integration
- https://www.apollographql.com/blog/apollo-client/how-to-use-apollo-client-with-remix/
- Authentication:
- Remix Auth: https://github.com/sergiodxa/remix-auth
- Google Auth Strategy: https://github.com/pbteja1998/remix-auth-google
# Icons:
- HeroIcons React: https://github.com/tailwindlabs/heroicons#react
# Layouting and Dashboard:
Mostly comes from creative-tim. (https://www.creative-tim.com/product/material-tailwind-dashboard-react#)
Main page:
- https://github.com/creativetimofficial/material-tailwind-kit-react
Dashboard:
- https://github.com/creativetimofficial/material-tailwind-dashboard-react
- How to have multiple layout: https://github.com/remix-run/remix/discussions/7296
# TODOs
Check todos here: https://github.com/mahmoudmoravej/testui/issues/2