This is for pratice only using next and diff backend like rails/java(might be) with graphql. I will also use this one on my sarisari store sales and invetory in future(I Hope I can continue this. ^_^)
I did follow a lot of tutorial specially on rails part and graphql side of things, then next will do testing with rspec and react testing library.
Please do critic this work in all of its part, and point me to what I can improve more.
Frontend (Next JS)
I've been using this ever since 2018 and never came back to CRA(create react app) maybe Because I'm not confident with regards to routing/webpack configuration..
install the packages.
yarn install
Generate the graphql stuff + hooks
yarn codegen
Then run the developement part.
yarn dev
or run production.
yarn build
yarn start
- Chakra UI - a css framework
- Apollo Client - for handling graphql
- Graphql Code Generator - can't explain :D
- Formik - a Form Library for react
- Yup - for input validation
- React Icons - for additional icons
- of course NextJS - react js framework.
- React testing library - didn't use this one yet but its there waiting.
- Eslint - im not sure why its not working, I even tried putting a root on it, but still it didn't work.
to navigate the code just go to pages
first, its like the routes.
pages/_app.tsx
this one is like the App.js you can see in CRA(create react app)
If you know how to use docker this will be easy, just cd to the root dir
and do the following.
docker-compose up -d
docker-compose run --rm mystore_api rails g [some commands here]
docker-componse run --rm mystore_api bundle [either install or add gem_name]
mystore_api is the name of the rails api container, check docker-compose.yml to change this or check the other containers.
--rm
this flag is for the docker-compose to exit after exicuting its command.
If you just use rails serve, please change the port to 3001 like:
cd backend
rails s -p 3001
I used 3001 in the fontend code Im not sure why
.yml
don't read my.env
. im not also sure if thenext.config.js
do read my.env
- rails - do follow the docs for model/migration generators.
- graphql-ruby - do follow the doc for its generator(object and mutation)
- Check the Gemfile I enable some of the commented gem like bcrypt and rack-cors
- Graphql Device - This a authentication gem that uses device and device token auth. I don't recomend this one cause there might be a more greater gem for JWT authentication
- rspec - soon.
if you have this extensions it will help you code to be much clearner and to make sure to follow the best practices.
- eslint
- tslint
- prettier
- ruby-rubocop - for ruby
- Authentication(Login, Registration, Logout)
- Profile (Account Info. Change Password)
- products
- I don't know yet