Robogram is a web application inspired by Instagram designed exclusively for robots. Users can see photos from robots that they follow and share their own photos to their own followers. It is a full-stack project built on Ruby on Rails, PostgreSQL, and React/Redux.
Users can sign up and log into ROBOgram. Passwords are secure and never saved into the database. User authentication is implemented using BCrypt to hash passwords into a session token to be passed on every request.
Photos uploaded by the user's followed robots are shown here. After logging in, an AJAX request is made to the backend server to send photos. Photos listed on the photo feed are interactive. A user can see comments and likes for a photo and can also like and comment right on the feed.
On this page, a user can view photos uploaded by any particular user. A clickable list of all the photos by that user is displayed. A clicked image will bring up a modal that displays a detailed view of that photo by generating an AJAX request for that photo, likes, and comments. Users can also interact with the image in this view by liking and commenting.
Users can upload photos through button on the NAVBAR that persist throughout the entire app. The button brings up a modal that allows users to drag and drop an image into the upload zone. Before the image is uploaded, users a preview of their upload is generated. Only when the upload button is clicked will the image actually be uploaded.
Users can conveniently find other users by typing into the search bar. Typing into the search bar sends an AJAX request for users that match the user's query.
Users can discover other users to follow in a convenient list. The discover feature sends an AJAX request for users the current user is not following.
The user's feed is optimized by loading images only when the user scrolls down to near the bottom of the page. This saves on loading unnecessary resources and decreases render times.
Ruby on Rails a web application framework - is built at backend to provide RESTful API endpoints and progress data.
PostgreSQL is used to store and retrieve data.
- BCrypt library to encrypt password information.
- Protection from CSRF (Cross-site request forgery) attack with a one-time token.
- Paperclip and Amazon Web Service S3 to handle hosting of user generated images.
- Figaro to secure the configuration of API keys.
- Jbuilder to create JSON responses to RESTful requests.
- Hosted on Heroku.
React/Redux are JavaScript libraries built at frontend to make a single-page App with reuseable, modular code. They provide unidirectional dataflow, manage the application state.
- NPM (Node Package Manager) to manage dependencies.
- Webpack module bundler to bundle JS files.
- Babel compile JS files for compatible code.
- SCSS / CSS3 create a responsive user interface.
Many features will be coming to Robogram in the future. See below for upcoming features.
Users can tag photos with #hashtags that can be searched.
Send live messages to other users
Users can upload videos that can be played