Case Study: Developing an Online Presence for a Training Institute
Last summer, I developed a dynamic website for my uncle who owns an institute in Srikakulam, India. To do this, I used my various programming skills to develop a fully functioning website. Written below is the case study(debrief) that describes how I developed an online presence for my uncle’s institute.
Jagadish Study Centre is a bank coaching institute in the small town of Srikakulam, India. Most institutions in this area have not adapted to the modern age of technology. However, Jagadish Study Centre has incorporated technology into their curriculum. First, they have computers in their building so students can write online practice exams. Also, they have a student portal so students can practice for their test anywhere at any time. Now, the client has requested for a website so they can increase their online presence. The website should include a homepage, about us, classes (specifies courses in the institute) and contact us page.
Phase 1: Content Writing, Backend, and Deployment
My first step in building this website was to choose a fitting css template. I browsed through many templates in sites such as colorlib, themeforest, etc. After a few hours of browsing, I found the correct template. I downloaded the template and started editing the content. Our client did not give us the content, so I also had to play the role as a content writer. In the process, I learned a lot about bank coaching institutes and the qualities of a qualified candidate. Once I was done with the content writing/editing, I programmed the backend logic for the contact form using python and flask, a python library for building websites. I also used boto3, the python AWS SDK, to store the user’s contact info in DynamoDB, a NoSQL database offered by AWS, and send an email to the administrator using SES, an email service offered by AWS. After I was done with the backend, I needed to deploy my website. I used Heroku, a platform as a service server, to accomplish this task. I first had to log in to Heroku using the CLI, then I needed to import all my files into the git directory, and at last I had to push the changes to Heroku. Since this was my third time deploying a web app to Heroku, I had minimal errors at deployment.
To access phase 1 website, go to jscexams.herokuapp.com (Note: this website might take up to 2 minutes to load).
Phase 2: Decreasing Latency, Mobile Responsiveness, and SSL
When I presented the finished product to the client, he was very pleased. But there was one major flaw: the website took too long to load. On average, it took 30 seconds to two minutes for the website to finally appear, which is obviously unacceptable. The reason it takes that long for the website to load is because I used the free version of Heroku, which sleeps after 30 minutes of no web traffic. To solve this problem, I decided to migrate this website to AWS. I used s3 to host the website, because there was no dynamic part to the website. I used the Amazon API Gateway and Lambda to record the user info in DynamoDB and send an email to the admin using SES. One of the challenges I encountered in this phase was that I needed to change my programming language from Python to N/ode.js because Lambda only supports Node.js for these types of integrations. Fortunately, I got the hang of this new programming language within a few days. Once I tested the s3 website, the load time decreased exponentially. Another advantage of migrating the website to the s3 bucket was that it takes way less time to upload the changes to s3 than deploying the changes to Heroku. To access this website, go to jscexams.com. But there was one problem: the website didn’t have any mobile responsiveness. The reason for this problem is because the client registered the domain in goDaddy, which does not support s3 routing. So I asked the client to register the domain in Route 53, AWS’s DNS provider and domain registrar which allows s3 routing. Once the client registered the domain, the mobile responsiveness was way better. But the website was not secured. In order to make the website secure, I needed to use AWS Certificate Manager and AWS CloudFront. Note: public SSL Certificates in AWS Certificate Manager is free, as long as the website’s traffic does not exceed over 2,000,000 views. After I obtained the SSL certificate, I needed to apply it to the website. To do this, I used AWS CloudFront. CloudFront is a CDN(Content Delivery Network) that caches the website in a local server so users in any area do not experience any latency. I needed to specify the website origin(the s3 bucket) and the ssl certificate. Once I saved the changes, I needed to go to route 53 and point the domain to the CloudFront url, not directly to the s3 bucket. Note: it takes 30 minutes minutes for changes in the website to affect CloudFront. To access the phase 2 website, go to jagadishstudycentre.com or https://jagadishstudycentre.com .
Phase 3: SEO and MailChimp Integration
Now, the website works perfectly fine. It is secured and the latency is decreased. But no one can access this website unless they type in the exact url. People should be able to access it by searching google, which brings us to SEO. SEO stands for Search Engine Optimization. It allows users to search google for the website. In order to accomplish that, I first needed to register for a google search console account. Search Console allows you to view your search engine traffic and allows you to submit a sitemap to google. An xml sitemap consists of the urls of all the pages in your website. If you prefer to automatically generate an xml sitemap, you can use free tools such as XML Sitemap Generator or SmallSEOTools.com. Once the sitemap was generated, I submitted it to the Google Search Console. After that, I needed to include meta tags so Google knows the target audience and what users need to search for the website to appear. Once I finished these tasks, I needed to wait for a few days in order for these changes to be affected on google. To test the SEO, search for “jagadish study center”.
The last integration I worked on is the MailChimp integration. MailChimp is used for online marketing and customer relations (CRM). My goal was whenever the user fills out their contact info, it should be stored in MailChimp which enables the client to send email blasts to convince the user to join Jagadish Study Centre. In order to do that, I needed to use the MailChimp API. A few challenges that I encountered in this integration is that MailChimp does not support client-side API submissions, so I needed to use Lambda to submit the user info to MailChimp. Lambda has its own problems. Lambda doesn’t have many of the Node.js modules like ‘request’, ‘mailchimp’, etc. so I needed to look up some alternatives for these modules. Another reason it didn’t work was because I entered an email in the contact form that I recently deleted in MailChimp, so it didn’t add the email to the contact list until I tried with another email. Once I solved these problems, I included an automation in MailChimp that sends an introduction email to the user when they submit the contact form. To view this integration, go to https://jagadishstudycentre.com/contact.html and, at your own discretion, submit the contact form (In the message, make it clear that you are testing the integration so I can go back and delete the information off the databases).
There are still way more integrations and products I can develop for the client. I am thinking of developing a Jagadish Study Centre app, where users can comment about the institute and where the administrator can post the next batch dates, important info, etc. I am also thinking of making an online payment platform for Jagadish Study Centre. There are limitless possibilities out there, so I encourage all of you to step forward and help innovate this world.