Live coding: Making a Web App in Rails 7 + React + Tailwindcss
If you enjoyed this video, consider supporting me via patreon: bit.ly/patreon-aj
In this video, I build, from scratch, a simple web app that keeps track of internet speeds at public places. This app uses Rails 7 as the server, bundled with React for front-end code, and tailwindcss for styling.The goal of this video is to give you an accurate picture of what working on a software side project looks like, from start to finish. I go through everything from project management (using Trello to break this web app into small pieces, and prioritizing as I go).
This is a long video because I want to show the reality of software engineer. It's not a linear path, but there are a lot trial and errors as we dive deeper implementation details. All the code and commits are on this github repository: https://github.com/ajtheengineer/spee..., feel free to check it out and follow along!
There may be some parts where there isn't much action, feel free to skip around by looking at the outline below:
0:00 - Demo + intro
1:57 - Scoping using trello
8:30 - Defining user stories
10:53 - Rough design
20:52 - Researching tech (Rails 7, React, EsBuild, Heroku, npm speed test library, tailwindcss, postgresql)
27:01 - Setting up git repo
30:13 - Setting up rails 7
33:02 - Database modeling, thinking through the schema design, tables, relations, required fields, types, etc
40:14 - Writing a database migration in rails, running the migrations, decimals vs floats, foreign keys
51:33 - Creating the ActiveRecord in rails to provide a good interface to work with those tables, and defining the rails associations
52:04 - Demoing and creating some data using those active records.
56:11 - Creating a pull request
58:10 - Setting up React in our code base. This goes through how I setup Rails codebase, and server side rendered react js. i decided to put both react and rails. onthe same code base so. Ican write. endto end tests later on. This also goes through configuration using the jsbundling-rails gem.
1:11:10 - Rendering a list in rails 7 + reactjs. Here, I write the endpoint that returns json to react which renders content on screen. I make use of useState and useEffect here, which was introduced into react as "hooks".
1:37:22 - Deciding between writing my own css and tailwindcss
1:40:06 - Decided to try tailwindcss - struggled to configure it using jsbunding-rails. Turns out, I need to include the cssbundling-rails gem, but it took me a while to get there.
1:43:24 - pivoting to cssbundling-rails to set up tailwindcss
1:45:16 - Using online resources to style a table (tailwindcomponents.com) withing a react jsx file. I struggled to get the web app to recognize the tailwind class names. Ended up changing the tailwind.config.js file in 1:53:23, which fixed things.
1:54:15 - Choosing a better table. I was not happy with the style that I used, so I decided to look for another list example.
2:11:40 - Implementing real time search Part 1: React
2:27:45 - Search part 2: Rails endpoint
2:32:17 - I discovered a bug and decided to set up the test framework so I can use test driven development to debug the issue
2:26:28 - Setting up factory_bot for ease of creating data. I struggled a bit here but ended up figuring out how to get the test to recognizer `FactoryBot` and the individual factories.
2:59:26 - All tests pass, list working.
3:00:57 - Adding more test for the last 3 columns
3:05:53 - Started down the route of creating a "new internet speed" but realized rails is doing too much.3:15:22 - Started using react-router-dom here so react can handle the routing. I struggled a bit because I looked at some outdated react router code
3:28:09 - Starting to add the route of the new internet speed button form
3:34:35 - Implementing the new internet speed form -- making the header consistent in terms of styling (more tailwindcss)3:37:30 - More refactoring again.
3:42:10 - Implementing the new internet form forreal. Adding some text input boxes and a button to initiate the speed test. Using tailwindcomponents.com and looking for a input field that I like.
3:49:10 - Trying the react-internet-meter npm package. Then setting it up with state in order to trigger it when the button is pressed. This uses react hooks (useEffect and useState). I eventually get this working so that after 5 times of measuring the speed, we send a post request up to the server to save the avg download speed.
4:31:55 - Writing out the endpoint to consume the POST request.
4:41:36 - It works!
4:44:38 - Debugging a CSRF error, and fixing a few other bugs.
4:51:50 - Back to scoping out the next steps, and re-organizing some trello cards.
4:54:58 - Disabling a button until all required fields are filled in. I disalbed the button and also changed the opacity using tailwindcss utility classes.
5:03:08 - Deploying to Heroku
Watch video Live coding: Making a Web App in Rails 7 + React + Tailwindcss online without registration, duration hours minute second in high quality. This video was added by user AJ The Engineer 11 June 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 12,815 once and liked it 340 people.