We recommend visiting this web app from a mobile device, where not possible you can use the mobile view in your browser
The Crafts mobile web app presents the world's finest Crafts from all around the world. All users can create an account and add their creations, view/like other user's crafts, and contact the creators if interested in their work.
The APP is created with the latest industry standards using React.js and Redux Toolkit
API Backend used for data manipulation: Rails Handmades Backend
The app is fully mobile responsive and tested using Jest and the React Testing Library.
- Guests and users can view a catalog of crafts added by users.
- Logged in users can like/favorite crafts, this will automatically add the items to the favorite list and increase the like count for the product.
- Users can click on a product to be routed to the product show page where they can see extra details and contact the creator.
- All the data manipulation and login system is handled by a Rails Backend API
This web app is live, you can check it here: Live demo
Rails Backend github link
Project design received from Microverse here, credit at the bottom of this README
I used Github projects for developing the app, you can see the sprints here for both Backend and Frontend.
- React.js
- create-react-app
- Redux Toolkit
- Axios
- Styled components
- Moment.js
- Ruby on Rails for the Backend API
- devise_token_auth for the login functionality
- Jest
- React Testing Library
- Recruiting Agency Website
- Bookstore - React Redux Toolkit with Rails API backend
- ReactRedux - Canon Calculator clone
To get this project up and running locally, you must have node and yarn installed locally.
To get this project set up on your local machine, follow these simple steps:
Step 1
Navigate through the local folder where you want to clone the repository and run
git clone https://github.com/cristianCeamatu/microverse-handmades-react-redux-toolkit. It will clone the repo to your local folder.
Step 2
Run cd microverse-handmades-react-redux-toolkit
Step 3
Run yarn install to install the npm packages from the package.json file.
Step 4
Run yarn start to start the webpack server, you can now navigate to http://localhost:3000 to view the app. The server refreshes the app every time you make a change to a file used by it.
Step 5
Most important, enjoy the app!
-
Open Terminal
-
Install dependencies (only if you did not install them previously):
yarn install -
Run the tests with the command:
yarn test
👤 Cristian Viorel Ceamatu
- Email: [email protected]
- Github: https://github.com/cristianCeamatu
- Twitter: https://twitter.com/CristianCeamatu
- Linkedin: https://www.linkedin.com/in/ceamatu-cristian/
Our favourite contributions are those that help us improve the project, whether with a contribution, an issue, or a feature request!
If you've read this far....give us a ⭐️!
This project is licensed by Microverse and the Odin Project
Photos from Vlada Karpovich at Pexels Video created by Daisy Anderson at Pexels Alexey Savitskiy for the design on behance