FlatApp Store

FlatApp Store is an e-commerce platform designed to showcase single-page apps created by members of Flatiron “Stranger Strings” cohort, as well as other Flatiron students.

DEMO

Users will be able to:

• Browse and search for cool SPAs by up-and-coming developers from Flatiron
• See detailed view of each app
• Save apps to a cart
• Add a "like" to an app of their liking
• Developers can upload their projects permanently to the platform using our “sellers” page

Technologies used:

• Our frontend was built with React.js and communicates with our JSON server in our backend
• This project was created using Create React App

Goals

Our goal was to build an React application and simulate a professional work environment:

• plan out your wireframes and features
• pitch our app in a project proposal
• use Git/Github for our source control system to track code changes and collaborate with team
• create a JSON server to create a RESTful API and make both a GET and a POST request
• utilize UI for our CSS styling

Accomplishments

• we were able to create 6 client-side routes using React Router in our nav bar/other UI element that allows users to navigate between routes
• we created use a controlled form to make our POST request to our JSON server
• we used PATCH request to our JSON server to persist the like counts
• we rendered developers' apps onto our store page using array filter method and GET requests from our JSON server
• we organized our code into purposeful components in order to keep it clean and dry
• we incorporated a UI framework for our styling with Chakra UI

Challenges/Future Improvements

• corresponding data with our seller component: tested the controlled form using optimistic and pessimistic rendering
• incorporating client-side routing: organizing our components with the routes from the very beginning

Avaliable Scripts

Fork and clone our frontend repository onto your local environment:
In the project directory, install the dependencies by running:
npm install

In the project directory, you can run:
npm start
Runs the app in the development mode.
Open http://localhost:3001 to view it in your browser.

Fork and clone our backend repository onto your local environment:
Install the dependencies by running:
npm install

To run your server in development mode, run:
npm run dev
While running in development mode, the server will re-load any time you make changes to the db.json file, so you can test our your seed data.

While your server is running, you can make requests to http://localhost:3000. Check it out in the browser to make sure your server works!

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Creators

Connie Park Github Linkedin
Samantha Navarro Github Linkedin
Mark Reese Github Linkedin
Harrison Sabean Github Linkedin