Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/JaniceYR/clone_instagram

Clone-Instagram is a web application inspired by Instagram for following the other users and sharing pictures. It was built using Ruby on Rails backend with PostgreSQL database and a React/Redux frontend.
https://github.com/JaniceYR/clone_instagram

association-rules css fullstack html5 instagram javascript postgresql react redux ruby ruby-on-rails scss wireframes

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/JaniceYR/clone_instagram
Owner: JaniceYR
Created: 2017-05-15T01:31:48.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2017-06-03T22:56:42.000Z (over 7 years ago)
Last Synced: 2024-08-05T08:07:27.414Z (5 months ago)
Topics: association-rules, css, fullstack, html5, instagram, javascript, postgresql, react, redux, ruby, ruby-on-rails, scss, wireframes
Language: Ruby
Homepage: https://www.clone-instagram.com
Size: 2.67 MB
Stars: 10
Watchers: 2
Forks: 9
Open Issues: 1
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

Open-Source-Ruby-and-Rails-Apps - clone_instagram - web application inspired by Instagram for following the other users and sharing pictures. It was built using Ruby on Rails backend with PostgreSQL database and a React/Redux frontend. 👴 ✅ (Happy Exploring 🤘)

README

# CloneInstagram

[Clone-Instagram](https://clone-stagram.herokuapp.com/#/) is a web application inspired by Instagram for following the other users and sharing pictures.
It was built using Ruby on Rails backend with PostgreSQL database and a React/Redux frontend.

## Features & Implementation
* Users can post their pictures and share it.
* Users can follow the other users and also unfollow them.
* Users can comment on the post and delete it. Also can like or unlike the post.

### Flexibility
Clone-Instagram can be used in every browser including Chrome, Safari, and even in mobile browser.
Users can post new pictures and can like and comment, everything using their mobile phone!
![check_on_phone](https://github.com/JaniceYR/clone_instagram/blob/master/docs/features/check_on_iphone.png)

### Secure Authentication
With secure authentication system, users can Sign-up or Sign-in in a secure way.
Or using guest id(DemoId), everyone can explore everything without Sign-up.
![sign_up_page](https://github.com/JaniceYR/clone_instagram/blob/master/docs/features/signup_in_page.png)

### Welcoming User & Suggestions
When users visit Clone-Instagram for the first time and just made their account, users can get a few suggestions for follows.
Suggestions will be the most popular users by followers count.
```ruby
//users_controller.rb
def index
@users = User.joins(:followers)
.select("users.*, count(follows) as follower_count")
.group("users.id")
.order("follower_count DESC")
.limit(5)
render "api/users/index"
end
```
![suggestion_page](https://github.com/JaniceYR/clone_instagram/blob/master/docs/features/suggestions_page.png)

### Feed
When users follow the other users, then users can check their followings posts on their feed page.
Users can comment on feed page and also like or unlike the post.
```ruby
// posts_controller.rb
def index
@posts = Post.where(user_id: current_user.feed_ids)
render "/api/posts/index"
end
```

## Project Design
Clone-Instagram was designed and built in two weeks.
The original [proposal](https://github.com/JaniceYR/clone_instagram/blob/master/docs/README.md) included:
* [React Components Hierarchy](https://github.com/JaniceYR/clone_instagram/blob/master/docs/component-hierarchy.md)
* [DB schema](https://github.com/JaniceYR/clone_instagram/blob/master/docs/schema.md)
* [Wireframes](https://github.com/JaniceYR/clone_instagram/tree/master/docs/wireframes)
(Wireframe example)
![wireframe_user_profile_page](https://github.com/JaniceYR/clone_instagram/blob/master/docs/wireframes/user_profile_page.png)

## Technologies
### Backend
* Ruby On Rails
* jBuilder
* PostgreSQL Database
* Heroku

### Frontend
* React/Redux
* javascript
* SCSS/CSS
* npm
* Webpack

### Other
* Cloudinary for users' profile pictures and post pictures storage.
* BCrypt for password-salting and hashing for a secure authentication system.

## Additional Features
* Add Geotags using Google map API
* Search for photos by Geotags