Shopping Center

Inspiration

A common problem we had where we found it tedious having to filter for art pieces that we wanted to hang in our room. Additionally, when we had pieces of art we no longer wanted, we felt like we wasted money on it and wanted an efficient way to sell it online.

What it does

Allows for users to filter different artworks based on type of art (Such as classical art) and buy them. Additionally, it allows people to sell their old pieces of art that they no longer want to other people for cheap.

How it is built

We built the front end using react. We created components to format our website nicely. For the back end, we used flask to create different routes for get and post request from the front end. We used SQLAlchemy for the database to store all posts in.

Challenges we ran into

Account registration was thought since it was difficult to figure out how would we transfer the access_token from page to page to verify that the user is logged in and is allowed to post.

Accomplishments that we're proud of

The website looks really nice and the components fit with the page. Post and accessing information was done really well. I am personally proud of the database implementation, I did not think it was possible at first.

What we learned

We all roughly knew a heavy amount of flask and react, however I would say that the front end people learned more back end and the back end people learn more front end. I, for example, was in charge of the back end. I know front end a little, however most of it is a blank to me. Seeing my front end teammates describing their process to me gave me a better understanding of how the front end side of things work.

What's next for Shopping Center

Filtering through artist (such as all art made by Andy Warhol.) A friend based system where you can communicate with people who have similar taste in art as you A profile page that allows you to fully display your artistic side!, have music play in the background through spotify’s API as well as background images that show who you are.

Built With

Submitted to

The Arts & Tech: CUNY Tech Prep Cohort 9 Hackathon

Created by

I worked mostly on properly setting up React components, things like the image views on the home page along with the magnifying glass feature shown on our art pages. I worked heavily with Martin to setup the React Router and utilizing get requests from the front end to the backend server we had setup.

Josh Katayev
I worked on the complete back end of the project. I used flask to develop to back end server and used sqlalchemy to create the database used to store all the information. In flask, I created routes that would connect with the front end so that get and post request can be sent to the server to store information to the data base or get information. Being the one working completley on the back end, I was also in charge of making sure my teammates understood how it worked. If they were setting something in the front end that required the post information, I would teach them exactly how to use axios to request that information from the back end server and how to store the response that it gives. Additionally, I was in charge of the design of the website. I used CSS to gives the website a more "homemade/coffee shop" feel, a style I personally like.

Martin Lahoumh
I worked on the front end of the website, mainly on the checkout page, which would show up after the user clicks “Add to Cart” button. I had a form that took in user credit card information and also enabled all the items that have been bought to be cleared once the user clicks the “Buy” button. After clicking the "Buy" button, a thank you message shows up. Due to time constraints, the items shown in the checkout page are all test items. Additionally, although this was a first react project that I worked with, I have learned a lot, so as to know how to create react components and how to work with react js.

Animesh Deb
Before we got to applying the code for the project, mock-ups had to be made to get an idea of how the website would look, and function. This is where I got to apply my illustration skills through Photoshop mockups that helped to organize our thoughts and assign who covered what aspect of the project. I was assigned to the purchase page. While I had experience with JS, HTML, and CSS, like Animesh, I had very little familiarity with React. Joshua provided videos and a React Devs guide to follow for the first day. It was kind of difficult at the start, but eventually, I got through it enough to develop the components necessary for my code.

Pablo Lara

Updates

Martin Lahoumh started this project — Aug 25, 2023 11:40 PM EDT

Leave feedback in the comments!

Log in or sign up for Devpost to join the conversation.