https://github.com/Gabriel-Lewis/ThinkPiece

A blogging website inspired by Medium
https://github.com/Gabriel-Lewis/ThinkPiece

javascript react redux ruby rubyonrails

Last synced: about 1 month ago
JSON representation

A blogging website inspired by Medium

• Host: GitHub
• URL: https://github.com/Gabriel-Lewis/ThinkPiece
• Owner: Gabriel-Lewis
• Created: 2016-10-30T18:58:23.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-01-19T02:38:38.000Z (over 1 year ago)
• Last Synced: 2024-02-16T01:30:52.888Z (4 months ago)
• Topics: javascript, react, redux, ruby, rubyonrails
• Language: Ruby
• Homepage: http://www.thinkpiece.space
• Size: 719 KB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 12
• Metadata Files:
  • Readme: README.md

Lists

• Open-Source-Ruby-and-Rails-Apps - ThinkPiece - A blogging website inspired by Medium 👴 ✅ 🚀 (Happy Exploring 🤘)

README

        
# Thinkpiece

[Thinkpiece Live Demo](http://thinkpiece.space)

Thinkpiece is a single page web app inspired by Medium.  It utilizes Ruby on Rails on the backend, a PostgreSQL database, and React.js with a Redux architectural framework on the front-end.  

## Features

### User Account Creation and Login

**Users can Sign up with Thinkpiece knowing their information is secure**

When users sign up their data is encrypted using the ruby gem [BCrypt](https://github.com/codahale/bcrypt-ruby). Once a user logs in they're browser stores a session token to keep them logged when they come to Thinkpiece again.

### Stories



**Stories are the main feature of Thinkpiece.**

Users can create, edit, and share their own stories, or read the stories of others and like them.

### Feed



**The main feed is where users can view stories of all of the users the follow.**

### Rich Text Editing



**With Rich Text Editing users can style their stories to their liking.**

One of Medium's best features is it's easy to use text editor. Using the [Medium Drafts](https://github.com/brijeshb42/medium-draft) node package, Thinkpiece recreates this experience. Users can embolden, italicize, highlight, add links, and more. Users can also use the keybindings they are familiar with to style their story. For example a user can highlight text and embolden it by pressing CMD-B.

### Image Upload



**A Picture is worth a thousand words**

Users can easily upload images in their story. The file input's success calls an ajax request to store the image on Imgur.

## Technical Details

Thinkpiece's visual component's are built with React, and redux. Each of the major elements are react components. For example below is the StoryFeed Render method below:

```javascript

render() {

  return (

    


      


        {

          this.props.stories.map(story => (

            

          ))

        }

      

    

  );

}

```


The StoryFeed Component creates StoryFeedItem's using the data it receives from the router onEnter. The React Routes is used in this project to keep the React components in sync with the URL. The [React Router](https://github.com/ReactTraining/react-router) structure for this project can be seen below.

```javascript

  

    

      

      

      

      

    

    

    

    

  

```

[React Modal](https://github.com/reactjs/react-modal) was used to display modals throughout this project. It was used on the login page to recreate a similar login experience to Medium's, as well as the edit profile modal.

Thinkpiece's backend is supported with PostgreSQL.

### Contact

You can reach me on

[Twitter](https://www.twitter.com/gabriel__lewis)

[Github](https://www.github.com/gabriel-lewis)

[LinkedIn](http://www.linkin.com/in/gabriellewis0)