aparcanapavel / astrogram

An app that lets people connect by sharing pictures of anything astrology related.

Astrogram

This is Astrogram a single page clone of Instagram. Astrogram includes the basic features of Instagram, like creating an account, logging in, logging out, staying logged in after refreshing the page, and having a profile show page for users(current user pofile will display different settings). Further, Astrogram also has a feature outside of what is included in Instagram, uploading images from the browser. Finally, Astrogram has been built mobile first!

Technologies Used:

1. JavaScript
2. Ruby on Rails
3. PostgreSQL
4. React.js
5. Redux.js
6. HTML5
7. CSS3
8. Sass
9. jQuery for Ajax calls to my API & for animations
10. BCrypt for user passwords
11. AWS S3 buckets to store user images

Features:

• Sign up, log in, log out with username & password
• Image upload Modal
• Image likes and unlikes with animation
• Profile show
• Follow and unfollow users
• Filtered feed that only shows users being followed by the current user.
• Search for users
• Edit profile
• Mobile Friendly

Bellow is the splash screen for a new visiting user

In order to handle the likes annimation, I used basic jQuery to add and remove classess to the heart element. In the end, it allowed me to create a simple annimation that expands and fills the heart for liking it, and it shrinks and shows a different heart uppon unliking the picture.

// #frontend/components/image_index_item.jsx
handleLike(imageId) {
    const { currentUser, likes } = this.props;

    for(let i = 0; i < likes.length; i++){
      if(likes[i].authorId === currentUser.id){
        this.props.deleteLike(likes[i].id);
        this.likeIcon = "far fa-heart";
        
        document.getElementById(`heartIcon-${imageId}`)
          .style.fontSize = '60px';

        $(`#heartIcon-${imageId}`)
          .fadeIn(800)
          .animate({ 'font-size': '30px' }, 150)
          .fadeOut(150);
      }
    }
    if (likes.every(like => like.authorId !== currentUser.id)) {
      this.props.createLike({ image_id: imageId, author_id: currentUser.id });
      this.likeIcon = "fas fa-heart";
      document.getElementById(`heartIcon-${imageId}`).style.fontSize = '40px';
      $(`#heartIcon-${imageId}`)
        .fadeIn(800)
        .animate({ 'font-size': '60px' }, 150)
        .fadeOut(150);

    }
    
  }

To upload images, I added this form that appears as a modal on top everything else in the page.

Lastly, if users were to visit their own profile page and click on the gear icon, it pops up another modal that shows a list with a link to my own current website, a logout button, and a cancel button.

astrogram's Issues

Fullstack proposal

Wiki Page Home

• Is the first page you see upon entering the wiki
• Contains a welcome message
• Contains a link/placeholder for a link to the live page
• All links in the right sidebar should contain each wiki page and link to the correct page
• Correctly formatted
  • each wiki page is listed in bullet points
  • all links route the correct page

Comments

• Looks good

---

MVP List

• Should have 7 MVPs.
  • 3 of those are User Auth, Heroku, and Production README.
  • The other 4 are from the MVP List or they have clarified them with you
• Contains a description sentence of the app
• Includes two to three detailed bullets on functionality and presentation of feature
• At least one CRUD feature, which states what CRUD operations are planned (creation, reading, updating, deletion)
• Estimates how long it will take the code each MVP
• Correctly formatted
  • MVPs are listed in an ordered list
  • Each MVP is broken down into bullet points

Comments

• Looks good

---

Database Schema

• Contains correct datatypes
• Contains appropriate constraints/details
  • primary key
  • not null
  • unique
  • indexed
  • foreign key
• Contains bullet points after the table that state which foreign keys will reference to which table, or references to the associations which will be made
  • foreign key and table name are lowercased, snake_cased and back_ticked
• Correctly formatted
  • schema is written in a table format
  • the table's name are lowercased, snake_cased and back_ticked
  • the table header column names are bolded
  • columns names are lowercased and snaked_cased and back_ticked

Comments

• Make sure to lowercase and snake_case your table names
• Some things might be missing:
  • Will images have captions?
  • Comments likely need a body

---

Sample State

• State shape is flat!
• State's keys are camelCased
• All keys within the values in the state are accessible in the schema
• Correctly formatted
  • Sample state is rendered with triple backticks, and the language ```javascript...```). This will display the state as a code block instead of a giant line of text
  • Top level slices
    • entities
    • session
    • errors (here or in ui)
    • ui (if needed)
  • Should NOT have nested slices, aka comments inside of posts
    • Some info from other tables is ok, for instance:
      • the author username and imageurl for a post. basically any info that the user can't change
      • like count and a boolean on whether the user likes the post instead of a likes slice

Comments

• This looks good. You just need to have the keys be camelCased instead of snake_cased.
  • image_src => imageSrc
• It might be a better idea to have the posts hold comment_ids instead of commentator_ids
• In the users, posts_id should probably be post_ids, or really, postIds

---

Backend Routes

• Contains the following sections: HTML, API Endpoints(Backend)
• Each route has a description
• API Endpoint routes contains wildcard variables written in snake_case
• Routes does not contain superfluous routes
• Have API routes that will allow the front end to get all info it needs and does not have unneeded routes:
  • probably doesn't need a GET likes api endpoint because that info comes through the post show

Comments

• Looks good

---

Frontend Routes

• Frontend routes contains wildcard variables written in camelCase
• Correctly formatted
  • Routes are displayed with inline coding text (backticks)

Comments

• Looks good