React Appointment Scheduling Project
Using React for the frontend and Rails on the backend, I made an appointment scheduling app for a healthcare clinic. I am currently working in an insurance company that schedules appointments for workers’ compensation patients so I thought the best way to finish the coding bootcamp was to integrate what I do now for my job into my final project.
Backend — Ruby on Rails
I have not used a database that uses PostgreSQL so I thought it would be good practice to use one for this project. The backend uses a PostgreSQL database to store the data for the user-client experience. The advantages to using PostgreSQL is that it is very reliable and stable for bigger developing applications that can handle production. Setting up the backend was straightforward and I did not find any difficulties until I got to the user authentication part.
I ended up watching lots of YouTube videos and various coding articles in order to understand JWT authentication in rails. JWT tokens are known as JSON web token authentication — an alternate way to using session-based authentication. We briefly went over JWT authentication in the Flatiron curriculum so I wanted to understand this concept more in order to use it for my project. JWT tokens are stateless which means nothing is stored in the server but rather generates an encoded token that gets checked for when a request is made from the user. Instead of associating a user with login credentials, the user has a unique token to make client-host transactions. Thanks to JSON tokens the user can login in to their profile and will be provided their unique token for access anytime they will need it. An example of a JSON web token looks like:
JWT authentication setup:
1 run rails g model User name email password_digest in the terminal
2 run rails db:migrate
3 Add these gems to the Gemfile.rb
gem 'bcrypt', '~> 3.1.7'
gem 'jwt'
gem 'simple_command'4 Use has_secure_password in the User model
5 Follow this guide for the rest of the JWT set up.
Models — Users, Doctors, & Appointments
class Appointment < ApplicationRecord belongs_to :doctor belongs_to :user validates :appointment_date, presence: trueendclass Doctor < ApplicationRecord has_many :appointments, dependent: :destroy has_many :users, through: :appointments validates :name, presence: trueendclass User < ApplicationRecord has_secure_password has_many :appointments, dependent: :destroy has_many :doctors, through: :appointments validates :name, presence: true validates :email, presence: true, uniqueness: true validates :password, length: { in: 5..20 }end
Frontend — React.js & Redux
Once the JWT authentication and the backend was finished, the next step was setting up the React frontend part of the app. I created the login, register, profile, sidebar, and homepage components together in order for the authentication features to work properly. React was a lot more different than the previous projects because of how each component had to have functions like a puzzle that can fit nicely together which made it fun but also very challenging.
In order to create the authentication and registration for users, I had to understand how to use Redux and the dispatching method. The dispatch method is used to trigger state changes to the store. An object is sent to the store which listens for the correct type of action to send to the redux state or reducers. A payload is then sent which contains the contents or the message of the action. React-Redux makes is possible for the user to have access to the specified actions from inside the reducers. The rootReducer is created which combines all the other reducers that have their designated actions for authenticating a user, sending a message to the user, and returning the doctors list to the user.
The fetchDoctors function is an action creator that is able to return a function via Redux Thunk which allows returning a function that delays dispatching of actions asynchronously instead of just returning plain old JavaScript. This delays dispatching of actions until data is received and returns a function that takes dispatch as an argument. The purpose of action creators are for 1) to return a function instead of plain JavaScript to work with the Redux store using Redux Thunk and 2) delays dispatching of an action so we do not dispatch an action immediately. Then with the mapStateToProps function and using connect() with the Doctors Container component, we are able to obtain the state of the doctors and fetch them by using this.props in the componentDidMount() function.
My takeaway from this project
React took a lot more studying and breaking down what each line of code and components are used for. I was not used to the different work flow of dispatching actions and the purpose of Redux which was why it was the most difficult for me to understand at the beginning. Although it was challenging, I really enjoyed using the React library framework once I started to put the pieces together. There is still much I do not know and I look forward to using more of Ruby on Rails and React together whenever it is necessary. Over time I hope to understand more of React in a deeper level and will be able to add more to my scheduling project such as being able to create doctors or signing in as an admin. I learned that in coding you never really finish a project and you will always find more ideas to upgrade and make the app more functional and efficient while trying to refactor as much as possible. Phew, after countless nights of living and breathing coding we made it! Feel free to check out my video demo and GitHub repo. Again, thank you for making it this far. Cheers!
https://www.youtube.com/watch?v=5p5KyLYtrqw&t=203s
Resources:
https://www.pluralsight.com/guides/token-based-authentication-with-ruby-on-rails-5-api
https://medium.com/@frouster/ruby-on-rails-postgresql-f1b037924bdf
