🏁 WEBSITE
Todo App created with React and typescript on the front end with golang on the backend while using gorm (ORM library for go) for handling mysql database/queries of todos and users.
- Reactjs - Web Framework
- Typescript - typed superset of JavaScript that compiles to plain JavaScript.
- ChakraUI - React component library
- JWT - JWT for Authentication
- MySQL - MySQL Database (ClearDB add on, on Heroku)
- Gorm - ORM library for go (Gorm_Mysql version)
- Heroku - Server and DB hosting service
- Clone or Fork repository
cd
to project directorycd
to client directory and runnpm install
to install project dependencies.- Create
.env
file in root of client directory - Add following configurations/keys to .env file
REACT_APP_ENDPOINT='https://YOUR-HEROKU-PROJECT-NAME.herokuapp.com/api'
OR'http://localhost:YOUR-LOCAL-PORT'
E.g.(8080)
- Create Heroku app and or account
- Go to settings -> Buildpacks -> Add Buildpack -> Add Go
- Go to resources -> Addons -> quick search ClearDb -> Add ClearDb
- Go to settings -> Config vars -> reveal config vars -> Copy CLEARDB_DATABASE_URL value to notepad -> add following config vars
DB_USER="ClearDB user"
which is after mysql:// from copied url which ends at first colon(:)DB_PASSWORD="ClearDB password"
which is after first colon(:) from copied url and ends at before @DB_HOST="Heroku clearDB host"
which is after @ from copied url which ends at first slash(/)DB_NAME="Heroku ClearDB name"
which is after first slash(/) from copied urlPORT="DESIRED PORT E.g.(5432)"
JWT_SECRET="secret"
cd
to server directory and create.env
file in root directoryDB_USER="ClearDB user"
OR local mysql userDB_PASSWORD="ClearDB password"
OR local mysql user passwordDB_NAME="Heroku ClearDB name"
OR local mysql DB nameDB_HOST="Heroku clearDB host"
ORlocalhost:
PORT="DESIRED PORT"
JWT_SECRET="secret"
- Create file called
Procfile
in server directory- Enter
web: bin/server
- Enter
- Run
go mod
to get and update dependencies
Run the development server:
go run main.go
Run the client development server:
cd ../client && npm start
Open http://localhost:3000 with your browser to see the result.