Pictoramica is a multifaceted application where its features serve various purposes. Users can use Pictoramica as a place for keeping a blog, a place for posting images, and/or a place for selling items.
- Application: https://sitbackn-react.github.io/pictoramica/#/
- Frontend Repo (Version 1): https://github.com/SitBackN-React/Pictoramica-Client
- Backend Repo (Version 1): https://github.com/SitBackN-React/Pictoramica-API
- Frontend Repo (Version 2): https://github.com/SitBackN-React/pictoramica (Currently in development)
- Backend Repo (Version 2): https://github.com/SitBackN-React/pictoramica-server (Currently in development)
As a team, we first discussed what kind of application we wanted to build next. After working together on Oasis Spaces, we knew that we wanted to further our skills in React as well as add more features. We wanted to create an app that would give users a platform to share their experiences about a specific topic, provide images for their blog or simply share to the world, and have the option to sell items. For example, if a user wanted to create refashion DIY sewing pieces, s/he is able to blog about their sewing experiences, post pictures of their projects, as well as have the option to sell their completed pieces.
After deciding the purpose of our new application, we created a spreadsheet containing all of the features we needed to include to meet MVP. Then, we divided up the features in order to set up the backend models and then the frontend components. Once it came down to styling, we collaborated to make mockups of each page and feature. We met as a team weekly to discuss our successes, processes, ideas, problem areas, and what we would work on for the following week. Although we began with working on separate features, we intertwined our work as we enhanced each feature. Using Github for version control, we were able to effectively communicate and review progress as a team.
-
As a user, I can sign-up for an account.
-
As a user, I can sign-in to my account.
-
As a user, I can change my account password.
-
As a user, I can sign-out of my account.
-
As a user, I can upload/create an image.
-
As a user, I can delete an image.
-
As a user, I can see my images.
-
As a user, I can see other users' images.
-
As a user, I can see an image of mine individually.
-
As a user, I can see other users' images individually.
-
As a user, I can like an image.
-
As a user, I can unlike an image.
-
As a user, I can view the number of likes on each image.
-
As a user, I can create a blog.
-
As a user, I can edit my blog information.
-
As a user, I can delete my blog.
-
As a user, I can create posts for my blogs.
-
As a user, I can edit my posts.
-
As a user, I can delete my posts.
-
As a user, I can like a post.
-
As a user, I can unlike a post.
-
As a user, i can view the number of likes on each post.
-
As a user, I can make comments on my own posts.
-
As a user, I can make comments on other users' posts.
-
As a user, I can delete comments that are made on my post.
-
As a user, I can add item(s) for sale into a cart.
-
As a user, I can update item(s) for sale into a cart.
-
As a user, I can delete item(s) for sale into a cart.
- React
- JavaScript
- React Axios
- JSX
- AWS S3
- React Bootstrap
- Figma
- React Spring
- Stripe
- Slack
- Zoom
- Google Sheets
For Version 1 of this project, you are able to add items to a cart, but the checkout feature will be added in Version 2.
Wireframes -
Home page:
Mockups -
- Connecting the checkout button with Stripe API
- Fixing the issue of being able to add the same item into the cart more than once when going back to the same item page and clicking on 'Add To Cart'
- Adding back in loading feature from react-spring
- Users will be able to edit and update their images
- Users will be able to delete the comments that they make
- Users will be able to stylize their posts with a text editor
- Users will be able to make their posts public or private
For support please feel free to click "Issues" above and open an issue. Or you may contact us here:
- Christine: huangc909@gmail.com
- Darius: itsalldari@gmail.com
- Shafqat: shafqat.umair@gmail.com
- Ashley: norwood54@icloud.com