I have built a Twitter Redesign for my Ruby on Rails capstone project which is a desktop web app. My project is a social media application called Converse
I had an option to personalise the website and style it my own way. The end goal however was to create anything that someone could share opinions about with people who follow them and vice versa. The design I have emulated is by Design idea by Gregoire Vella on Behance. As per the project specifications, I have followed a user journey to build the following MVP version of the app:
- The user logs in to the app, only by typing the username (a proper authenticated login is not a requirement).
- The user is presented with the homepage (see the Homepage screenshot above) that includes:
- Left-side menu (includes only links to pages that are implemented).
- Tweets tab in the centre (skip Photos and Videos for this MVP).
- Right-side section with *Who to follow (*skip Trending for this MVP).
- The Tweets section includes:
- Simple form for creating a tweet.
- List of all tweets (sorted by most recent) that display tweet text and author details.
- The Who to follow section includes:
- List of profiles that are not followed by the logged-in user (ordered by most recently added).
- When the user opens the profile page (see the Userpage screenshot above), they can see:
- Left-side menu (includes only links to pages that are implemented).
- Cover picture and Tweets tab in the centre (skip other tabs and Tweet to user form).
- Right-side section with Profile detailed info.
- The Profile detailed info section includes:
- User photo.
- Button to follow a user.
- Stats: total number of tweets, number of followers and number of following users.
- List of people who follow this user.
- At the end extend your MVP app with one simple feature of your choice.
I also followed the guidelines of the given design, which included:
- Colors
- Typographies: font face, size and weight
- Layout: composition and space between elements
While developing the project, I ensured I set-up code linters,used the right gitflow, tested business logic, wrote good commit messages and an informative README.
- Ruby
- Ruby on Rails
- Bootstrap
- Postgresql
- Embedded Ruby
[YouTube Link](https://youtu.be/aqsedRJhRgc
To get a local copy up and running follow these simple example steps. All steps are essential to run this example application. Additional code or steps may be needed in case of installation of various prerequisites and with difference to your Operating System.
- Ruby v3.0.0
- Node v12.18.2
- Yarn v1.22.5
- npm v6.14.8
- Sqlite3 v3.33.0
- Rails v6.1.3
- If you don't have ruby installed, you can find instructions through this link
- If you don't have node installed, you can find instructions through this link
- If you don't have yarn installed, you can find instructions through this link
- If you don't have npm installed, you can find instructions through this link
- If you don't have sqlite3 installed, you can find instructions through this link
- Install Rails by following instructions here
$ git clone https://github.com/IjayAbby/Twitter-redesign.git
$ cd Twitter-redesign
Create your database and set it up
$ rails db:create
$ rails db:migrate
Run $ bundle install to set up gems.
Start your server with $ rails s and navigate to the Converse Desktop Web App
Run $rspec
👤 Ijay Abby
- Github: @githubhandle
- Twitter: @twitterhandle
- Linkedin: linkedin
Contributions, issues and feature requests are welcome!
Feel free to check the issues page.
Give a ⭐️ if you like this project!
- Microverse
- Gregoire Vella on Behance
- Rails Guides
- Unsplash.
This project is MIT licensed.