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
Смотрите видео Live coding: Making a Web App in Rails 7 + React + Tailwindcss онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь AJ The Engineer 11 Июнь 2022, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 12,815 раз и оно понравилось 340 людям.