The RubyOnRails-Blog app will be a classic example of a blog website. I will create a fully functional website that will display a list of posts and empower readers to interact with them by adding comments and liking posts.
The end result should follow the following data model (this is an Entity Relationship Diagram):
For this project I will have full freedom in terms of visual design but I will need to keep the following wireframes:
I will practice my knowledge about basic Ruby on Rails concepts - starting from the Views and finishing the database connection. I will also implement ideas like authentication, authorization, and all kinds of tests. In the last step, I will create an API instead of API consumption.
I will be building the RubyOnRails-Blog for three weeks. Here is the list of projects that will guide me through the steps described above. Please find details about each of the milestone requirements in the upcoming project activities.
-
Project 1: Creating a data model.
- Create a new rails app. (rails new app-name --database=postgresql)
- add database credentials at config\database.yml
- run
rails db:create - Build project schema.
- Create the necessary migration files.
rails generate migration CreateUsers name:string photo:string bio:text posts_counter:integerrails generate migration CreatePosts title:string text:text comments_counter:integer likes_counter:integerrails generate migration CreateComments text:textrails generate migration CreateLikes
- Run the necessary migration files.
rails db:migrate
- Table and column names should match the ERD diagram.
- note: photo for users table should be a link to an image
- Foreign keys should be included.
- Pay attention that in
poststable the column holding the foreign key to theuserstable should be namedauthor_id
- Pay attention that in
- All columns that are foreign keys should have a corresponding index.
- Create the necessary migration files.
- Be sure to reference the from the ERD.
-
Project 2: Processing data in models
- Create models
- Create model classes for all entities as shown in the ERD diagram.
- Set up associations between models.
- Remember that author_id column in posts table should be the foreign_key for the users table.
- Use models to insert data
- Open
rails consolecommand on the project folder - Create at least one user by running the following code:
User.create(name: 'Fickry', photo: 'https://unsplash.com/photos/a-man-with-a-white-beard-and-a-gray-turban-l9-G4RM_LYc', bio: 'Man with a white beard and a gray turban.') User.create(name: 'Altin', photo: 'https://unsplash.com/photos/a-man-with-red-lipstick-on-his-face-OaSkiXe0vQA', bio: 'Man with red lipstick on his face.') User.create(name: 'Sajad', photo: 'https://unsplash.com/photos/a-man-in-an-orange-jacket-and-sunglasses-j30dP1-EOeQ', bio: 'Man in orange jacket and sunglasses.') User.create(name: 'Karsten', photo: 'https://unsplash.com/photos/a-woman-with-her-arms-crossed-standing-in-a-field-kntovEvTQ5E', bio: 'Woman with her arms crossed standing in a field.') User.create(name: 'Keibalo', photo: 'https://unsplash.com/photos/a-close-up-of-a-person-with-red-hair-UKNtvXVxyQU', bio: 'Close up woman with red hair.') User.create(name: 'Atiyeh', photo: 'https://unsplash.com/photos/a-woman-wearing-a-green-shawl-with-red-flowers-on-it-9BiimsEWffs', bio: 'Woman wearing a green shawl with red flowers on it.') User.create(name: 'Tetiana', photo: 'https://unsplash.com/photos/a-black-and-white-photo-of-a-woman-smiling-_B2VNYbOez4', bio: 'Black and white photo of a woman smiling.')
- Create at least 4 posts written by one of the users you created by running the following code:
Post.create(author: User.find(1), title: 'Hello', text: 'This is my first post') Post.create(author: User.find(1), title: 'Hello', text: 'This is my second post') Post.create(author: User.find(1), title: 'Hello', text: 'This is my third post') Post.create(author: User.find(1), title: 'Hello', text: 'This is my fourth post') Post.create(author: User.find(2), title: 'Hello', text: 'This is my first post') Post.create(author: User.find(2), title: 'Hello', text: 'This is my second post') Post.create(author: User.find(3), title: 'Hello', text: 'This is my first post') Post.create(author: User.find(4), title: 'Hello', text: 'This is my first post')
- Create at least 6 posts comments for one of the posts you created by running the following code:
Comment.create(post: Post.find(1), user: User.find(2), text: 'Hi Fickry!, Altin here' ) Comment.create(post: Post.find(1), user: User.find(3), text: 'Hi Fickry!, Sajad here' ) Comment.create(post: Post.find(1), user: User.find(4), text: 'Hi Fickry!, Karsten here' ) Comment.create(post: Post.find(1), user: User.find(5), text: 'Hi Fickry!, Keibalo here' ) Comment.create(post: Post.find(1), user: User.find(6), text: 'Hi Fickry!, Atiyeh here' ) Comment.create(post: Post.find(1), user: User.find(7), text: 'Hi Fickry!, Tetiana here' )
- Open
- Create custom methods
- Users
- A method that returns the 3 most recent posts for a given user.
- Posts
- A method that updates the posts counter for a user.
- A method which returns the 5 most recent comments for a given post.
- Comments
- A method that updates the comments counter for a post.
- Likes
- A method that updates the likes counter for a post.
- Go to
rails cand check if your methods are working.
- Users
- Create models
-
Project 3: Validations and Model specs
- Add the following validations:
- User model
- Name must not be blank.
- PostsCounter must be an integer greater than or equal to zero.
- Post model
- Title must not be blank.
- Title must not exceed 250 characters.
- CommentsCounter must be an integer greater than or equal to zero.
- LikesCounter must be an integer greater than or equal to zero.
- User model
- Add unit specs for all of your models' methods and validations.
- Add the following validations:
-
Project 4: Controllers.
- Use controllers to handle requests and render empty views.
- Implements Rails naming conventions.
- Use params from browser requests in a safe way.
- create all controllers and views, won't be processing any data yet, will add simple placeholders for the views with plain HTML.
- NOT use rails generate scaffold command. The point of this project is to show how to set up controllers by ourself.
- the app handles the URLs used in the wireframes:
- For each URL created:
- A route.
- An action in the correct controller.
- A view file.
- View files should include only placeholders written in plain HTML, e.g:
- Here is a list of posts for a given user
- Make sure that the added code to handle only the 4 required URLs.
-
Project 4: Controllers specs.
- Write test for controllers.
- The test is under folder spec > requests
-
Project 5: Views.
- Use preprocessed HTML file with embedded Ruby code.
- Use layouts and templates for shared content.
- Implement the design from the wireframes.
-
Project 6: Forms.
-
Project 7: Integration specs for Views and fixing n+1 problems.
-
Project 8: Add Devise.
-
Project 9: Add authorization rules.
-
Project 10: Add API endpoints.
-
Exercise: API documentation.
Client Side / Front-End
Server Side / Back-End
Package, Library, Framework
Code Convention, Code Analysis
Version Control, CI/CD, Hosting Service
IDE, Desktop Apps, Other Tools
- implement authentication
- implement authorization
- create an API
To get a local copy up and running, follow these steps.
In order to run this project you need:
- Operating System (Windows, Linux, Unix)
- Ruby version >= 7.0.0 installed
- Rails Gem installed
- PostgreSQL installed
- git version >= 2.38.x
- IDE (visual studio code, etc)
- browser (chrome, firefox, edge, safari)
- install the dependencies
Clone this repository to your desired folder:
cd blog-app
git git@github.com:fickryiman/RubyOnRails-Blog.gitInstall this project with:
cd RubyOnRails-Blog
bundle installTo run the project, execute the following command:
rails server
rails sRuns the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
To run tests, run the following command:
Run models validation test
rspec
Run models methods unit test
rails test
Run Github Actions Test
rubocop
npx stylelint "**/*.{css,scss}"
auto fix linter with --fix or -A
rubocop -A
npx stylelint "**/*.{css,scss}" --fixYou can deploy this project using: GitHub Pages Example:
git@github.com:fickryiman/RubyOnRails-Blog.git👤 Fickry Bil Iman
- GitHub: @fickryiman
- Facebook: @fickry.bil.iman
- LinkedIn: fickry-bil-iman
- add login to user with social media auth or google auth
Contributions, issues, and feature requests are welcome!
Feel free to check the https://github.com/fickryiman/RubyOnRails-Blog/issues.
If you like this project please follow me on my GitHub: @fickryiman or connect on my LinkedIn: @fickry-bil-iman.
Credits and Thanks to:
- Allah for the everythings, Alhamdulillah.
- My Families for all of the supports.
- Microverse for all of the experiences, lessons, projects.
This project is MIT licensed.