Krishnan's Personal Website


Home | About | Blog | Interesting Reads | Tutorials | Skills | Personal Projects | Books | Fun | Connect with me


Frontend design and planning


Published On: Jun 27 2023
Written By: Krishnan Sethuraman
Category: Building Chuckle


Before working on the backend I wanted to put a simple plan for the frontend so that I am aware of what APIs and the parameters I need to consider which building the backend. 

Also please note that the name of this application is Chuckle and the tweets that it will create will also be called chuckles. :-)  

I will not be building any login and signup feature as the intention is not to launch it as a standalone product but as a demo application to demonstrate my work. In addition to that I want anyone to test and play with Chuckle without wanting to register or login. 

As I mentioned in my previous post that I will be using the develop branch to build the product as using a feature specific branch would be futile for the following reasons. 

  1. There is no dev environment
  2. I am a lone developer working on Chuckle

However I did two mistakes,

  1. Forgot to checkout the main branch
  2. Instead of the main branch I had locked the master branch

I realized this at the time of committing the code. So after the code commit, I merged the changes to the develop branch via a PR and checked it out locally and also locked down the main branch. Now further commits would be to the develop branch. 

What did I commit? 

Docker on localhost

I am a big fan of using Docker for localhost development so I created docker-compose configurations for the frontend. 

Identifying unique user sessions
As I will not be building login and register features I have considered a plan to generate unique IDs for each user, so that I can identify different users as they interact with the application. 

View to create a new chuckle
I created a very simple chuckle feed page which has a textarea and a button to create new chuckles. Under the create new chuckle option I will be displaying the chuckles that other people create. There will be no follow option as all the chuckles will be from anonymous visitors so I will display all the chuckles that get created. 

What is the high level plan?

I have created a chuckle.php page. This page has the option to create new chuckles and below that chuckles created by other users will be displayed. 

There is an index.php page which will be the landing page and upon landing the users will be forwarded to the chuckles.php page. Before forwarding we will check if the user already has a cookie. If yes then I will send that information as part of the HTTP requests to identify a repeat user. In case of no cookie it will be assumed that this is a new user and a cookie will be generated for him. For now I am planning to maintain a jwt token to identify if the user is a new user or a repeat user. 

For the initial proof of concept, 

For the poc, I will not be building the frontend with React. Instead I will use php to render html  vuejs making the ajax call to the backend and displaying the received information on the web page. Once the poc is done, I will consider incorporating a new UI and using React for the frontend. 

Cron job to create new chuckles
As Chuckle is a demo project, I don’t think it will ever have any meaningful traffic. So I will also build a cron job that will randomly create new chuckles so that, when some lands on the chuckles page they see some content coming in and the site looks alive, instead of an empty lifeless page. 

I am using Bootstrap from day one to ensure that the web pages are responsive. They will be ugly but responsive. 

Parting words,

You can checkout this commit here