An appointment-management app that allows users to add, edit, or delete their appointments. Doctors, in particular, may find this app useful. Patient information such as their name, age, phone number, and appointment date can be stored and managed.
Link to the application: https://easy-appoint.netlify.app
- Username: testUser
- Password: pass123
- How to use Material UI (v5) to create user interfaces in React
- How to use React Query to manage data coming from the server in the client-facing app
- How to define and use HOCs (higher-order components) in React
- How to implement server-side pagination, searching, and sorting
- How to set up a SQL database (MySQL) and connect it to an Express app
- How to write SQL queries and send them from the backend to the MySQL database
- How to deploy a MySQL database on Heroku through ClearDB
- CRUD functionalities
- User authentication and authorization (JWT authentication)
- Pagination
- Sorting by various fields (full name, age, and date)
- Searching
- Appointments with today's date are highlighted
- Material UI
- create-react-app
- React + Hooks + Context
- React Router
- React Query
- Formik + Yup
- Nodejs + Express
- MySQL
- jsonwebtoken
- bcrypt
Open a terminal and clone this repo:
# Clone this repository
$ git clone https://github.com/Ayon95/easy-appoint.git
# Go into the repository
$ cd fullstack-memories-app
# Remove current origin repository
$ git remote remove origin
# If you want, you can add a new remote repository
$ git remote add origin https://github.com/<your-github-username>/<your-repo-name>.git
Go to the server
folder, and create a .env
file. Add the following environment variables with your own values:
PORT=5000
MYSQL_USER='root'
MYSQL_HOST='localhost'
MYSQL_PASSWORD='your-mysql-password'
MYSQL_DATABASE='your-database-name'
JWT_SECRET='your-jwt-secret-string'
You can set up a local MySQL database connection using softwares like MySQL Workbench and HeidiSQL
Once you have created a local database, open up two terminals - one for the server, and one for the client:
# Terminal for the server
# cd into the server folder
$ cd server
# Install dependencies
$ npm install
# Install nodemon if you don't have it
# You can either install it globally, or locally only for this project (remove the -g flag)
npm install nodemon -g
# run the server
$ npm run dev
# Terminal for the client
# cd into the client folder
$ cd client
# Install dependencies
$ npm install
# run the client app
$ npm start
At this point, you will have the server running locally at http://localhost:5000, and the client app running in the browser at http://localhost:3000
.
Note that the client app is configured to send all requests to the deployed server. If you want it to send requests to the local server, then you just have to change the base url in AuthContext.js
and appointmentService.js
:
// In client/src/contexts/AuthContext.js
const baseUrl = 'http://localhost:5000/user';
// In client/src/services/appointmentService.js
const baseUrl = 'http://localhost:5000/posts';
If you don't have a Heroku account, you will need to create one first. Then, you have to install the Heroku CLI on your machine. After that, open a terminal and log in to your Heroku account:
$ heroku login
Then, go to the server
folder, and create a file named Procfile
. The Procfile
tells Heroku which command to run at startup. Inside that file, include the following command:
web: npm start
ClearDB is an add-on that you can use to create and deploy a MySQL database. To add this add-on, go to your Heroku project dashboard, and select the Resources
tab. Then search for ClearDB MySQL.
Once you have successfully created a ClearDB database, go to the Settings
tab and click on Reveal Config Vars
. There will be a config variable called CLEARDB_DATABASE_URL
. This URL contains information required for your server-side application to connect to this database. The format of the URL is shown below along with what different parts mean:
CLEARDB_DATABASE_URL=mysql://<MYSQL_USER>:<MYSQL_PASSWORD>@<MYSQL_HOST>/<MYSQL_DATABASE>?reconnect=true
Make sure to add these config variables with the values from the ClearDB database URL.
Then, go to your Heroku dashboard on the Heroku website, and create a Heroku app for this project. Initialize a git repository if your project does not have one, and add a heroku remote branch:
# Make sure you are in the project root directory, i.e. the folder that contains client and server sub-folders
# Initialize an empty git repository
$ git init
# Add a heroku remote for your project
$ heroku git:remote -a your-project-name
# Push the server folder (which is a subdirectory) from the master branch to the remote heroku branch
git subtree push --prefix server heroku master
After that, Heroku will generate a build of the server-side app and deploy it if the build is successful.
- Make sure to add config variables to your heroku app, for example, your database config variables and jwt secret
- you can add config variables by going to the
Settings
tab in your Heroku project dashboard - the config variables need to be named exactly the same as your environment variables
- you can add config variables by going to the
- Make sure to configure your client app to send all requests to your deployed heroku app
First, create a Netlify account if you do not have one already. Log in to your account. If your project is already on GitHub, then you can opt for Netlify's continuous deployment:
- Click
New site from git
, then selectGitHub
- Select the project repo that you want to link to your Netlify site for continuous deployment
- Apply these settings -> Base Directory: client, Build Command: npm run build, Publish directory: client/build
- Click
Deploy Site
If you do not have a git repo for your project on GitHub, then you have to manually generate a production build of the client app:
$ cd client
# create a production build
$ npm run build
You can use this build
folder to deploy the client app to Netlify.