{"id":13818958,"url":"https://github.com/Gabriel-Lewis/ThinkPiece","last_synced_at":"2025-05-16T04:31:58.377Z","repository":{"id":12616706,"uuid":"72368825","full_name":"Gabriel-Lewis/ThinkPiece","owner":"Gabriel-Lewis","description":"A blogging website inspired by Medium","archived":false,"fork":false,"pushed_at":"2023-01-19T02:38:38.000Z","size":736,"stargazers_count":7,"open_issues_count":12,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T04:09:40.575Z","etag":null,"topics":["javascript","react","redux","ruby","rubyonrails"],"latest_commit_sha":null,"homepage":"http://www.thinkpiece.space","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Gabriel-Lewis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-30T18:58:23.000Z","updated_at":"2024-06-07T11:36:35.000Z","dependencies_parsed_at":"2023-02-10T19:46:00.340Z","dependency_job_id":null,"html_url":"https://github.com/Gabriel-Lewis/ThinkPiece","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gabriel-Lewis%2FThinkPiece","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gabriel-Lewis%2FThinkPiece/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gabriel-Lewis%2FThinkPiece/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Gabriel-Lewis%2FThinkPiece/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Gabriel-Lewis","download_url":"https://codeload.github.com/Gabriel-Lewis/ThinkPiece/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254469074,"owners_count":22076423,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","redux","ruby","rubyonrails"],"created_at":"2024-08-04T08:00:36.366Z","updated_at":"2025-05-16T04:31:57.501Z","avatar_url":"https://github.com/Gabriel-Lewis.png","language":"Ruby","funding_links":[],"categories":["Happy Exploring 🤘"],"sub_categories":[],"readme":"# Thinkpiece\n\n[Thinkpiece Live Demo](http://thinkpiece.space)\n\nThinkpiece 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.  \n\n## Features\n\n### User Account Creation and Login\n\n**Users can Sign up with Thinkpiece knowing their information is secure**\n\nWhen 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.\n\n### Stories\n\n\u003cimg alt=\"Gabriel Lewis\" width='700px' src=\"http://i.imgur.com/y1zSeQm.png\"\u003e\n\n**Stories are the main feature of Thinkpiece.**\n\nUsers can create, edit, and share their own stories, or read the stories of others and like them.\n\n### Feed\n\n\u003cimg alt=\"Think piece feed\" width='700px' src=\"http://i.imgur.com/ihxBGdz.gif\"\u003e\n\n**The main feed is where users can view stories of all of the users the follow.**\n\n### Rich Text Editing\n\n\u003cimg alt=\"rich text editing\" width='700px' src=\"http://i.imgur.com/Qmdzjam.gif\"\u003e\n\n**With Rich Text Editing users can style their stories to their liking.**\n\nOne 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.\n\n### Image Upload\n\n\u003cimg alt=\"Image Uploading\" width='700px' src=\"http://i.imgur.com/K1WCa49.gif\"\u003e\n\n**A Picture is worth a thousand words**\n\nUsers can easily upload images in their story. The file input's success calls an ajax request to store the image on Imgur.\n\n## Technical Details\n\nThinkpiece'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:\n\n```javascript\nrender() {\n  return (\n    \u003cdiv className='background'\u003e\n      \u003cul className='story-feed'\u003e\n        {\n          this.props.stories.map(story =\u003e (\n            \u003cStoryFeedItem\n              key={story.id}\n              user={story.user}\n              story={story}\n              currentUser={this.props.currentUser}\n              createLike={this.props.createLike}\n              deleteLike={this.props.deleteLike}\n            /\u003e\n          ))\n        }\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\nThe 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.\n\n```javascript\n\u003cProvider store={store}\u003e\n  \u003cRouter history={browserHistory}\u003e\n    \u003cRoute path='/' component={App} \u003e\n      \u003cIndexRoute component={StoryIndexContainer} /\u003e\n      \u003cRoute path=\"/stories\" component={StoryIndexContainer} /\u003e\n      \u003cRoute path=\"/stories/:storyId\" component={StoryContainer} onEnter={onEnterFetchStory}/\u003e\n      \u003cRoute path=\"/users/:username\" component={UserProfileContainer} onEnter={onEnterFetchUser}/\u003e\n    \u003c/Route\u003e\n    \u003cRoute path='/new-story' component={NewStoryContainer} /\u003e\n    \u003cRoute path=\"/stories/:storyId/edit\" component={StoryFormContainer} onEnter={onEnterFetchStory} /\u003e\n    \u003cRoute path='*' component={NotFoundComponent} /\u003e\n  \u003c/Router\u003e\n\u003c/Provider\u003e\n```\n\n[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.\n\nThinkpiece's backend is supported with PostgreSQL.\n\n### Contact\nYou can reach me on\n\n[Twitter](https://www.twitter.com/gabriel__lewis)\n\n[Github](https://www.github.com/gabriel-lewis)\n\n[LinkedIn](http://www.linkin.com/in/gabriellewis0)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGabriel-Lewis%2FThinkPiece","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FGabriel-Lewis%2FThinkPiece","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FGabriel-Lewis%2FThinkPiece/lists"}