Sinatra MVC boot camp project

Good evening engineers,

Things are starting to speed up here at Flatiron School. I'm doing a lot of outside of boot camp studying, researching, exploring, connecting with other devs. I was able to build a functional "full-stack" project for this module. Let's dive in!

Oliver Feher

@oliver92f

This week I'm going to be working on an MVC project using Ruby, Sinatra ( lightweight Ruby framework) with a PostgreSQL database, along with vanilla JavaScript. Take a sneak peek at the landing page.

#ruby #softwareengineer #javascript #coding #postgresq…lnkd.in/dNNHrG3

07:04 AM - 02 Mar 2020

2 2

The project

The FlatironCROSS Clinic .. I know I should've named it something like Gray's anatomy, but I thought this is more RESTful!!!

This assignment requires the students to use Models Views and Controllers, and basic CRUD functions. The views are rendered with ERB templates, for the models we are using ActiveRecord, and finally, there is a Rack server running in the background.

I'm using pure CSS3, HTML5, and ES6 JS for my front-end. Ruby is my main language for this project along with a Sinatra framework. I have a SQLite3 database for development and a PostgreSQL database for production connected.

How it works

I have multiple tables in my database, and they are associated with each other with has_many, has_many through, belongs_to relationships. Sign-up and Log-in/out abilities with password and e-mail address validation/authentication via BCrypt.

The app is available for patients and for employees of the clinic. Employees are able to confirm or cancel appointments. They are also able to prescribe medications for patients and edit their personal records.

Patients are able to book appointments with their selected doctors, leave reviews, view their medications, and edit their personal information.

Here is the reviews section, where all reviews are posted anonymously, with a timestamp on them and a 1-5 rating. Unter the H1 tag, the average rating is being calculated.

My favorite parts/challenges

1, For the doctor's section, whenever they select a patient appointment request, it sends a GET request via JavaScript, and the server responds with a JSON file that I use to create a User object and manipulate its data. JS also appends a child container that has multiple P tags with the patient's information.

2, Doctor's pending appointment section, ERB template generates all the pending requests, with their own unique cancel and confirm button that send POST requests to update/delete data via an each method that looks like this:

<% @pending_apts.each do |x| %>                            
                    <div class="generate_grid">
                        <p class="generate_p">Request from: <%=x.user.detail.full_name%></p>
                        <p class="generate_p">DOB: <%=x.user.detail.dob%>, G: <%=x.user.detail.gender%>, Cell: <%=x.user.detail.phone_number%></p><br>
                        <div class="cancel_confirm">

                            <form method="POST" action="/appointment/update">
                                <input type="hidden" id="hidden" name="<%=x.id%>">
                                <input type="submit" class="button" value="Confirm">
                            </form>

                            <form method="POST" action="/appointment/delete">
                                <input type="hidden" id="hidden" name="<%=x.id%>">
                                <input type="submit" id="m-red" class="button" value="Cancel">
                            </form>
                        </div>
                    </div>
                <%end%>

A complete demo video is available under this youtube link where I explain how everything works.

Conclusion

I will definitely spend some more time with the project to clean-up code, refactor, make it responsive so it will be available for all screen sizes. I'm going to deploy to Heroku once all the listed above are completed.

There is a one week break coming up, in a week. I'm a little ahead of the curriculum, and our next module is Ruby on Rails. I'm super excited about it!! During the next two weeks, I will be learning and practicing with the (M)ongodb (E)xpressjs (R)eactjs (N)odejs stack.

Definitely made with LOVE!
Have a great weekend,
Olly