RepairMe is a full-stack application that allows a user to post repair guides for products that may be broken or need replacing. authorized users have the ability to create update and delete repair guides. non users can still view the site as intended.
The website's should be able to allow the user (when signed in) to make repair guides for electronics,edit their guide, and delete their guide. those guides should be stored in categories for those products, and those products should be in categories as well.
- Build a Ruby On Rails server with RESTful JSON endpoints
- Building a database that will consist of multiple tables
- Complete full CRUD funtionality
- User authorization and authentication will be avalible
- Implement CSS flexbox with 2 media queries
| Library | Description |
|---|---|
| React | i would need a react app |
| React Router | i need react router dom for things like routes |
| Ruby | the coding language we'll use for backend |
| Ruby on rails | a gem package we'll be using with ruby for the backend |
| Axios | assist in making api calls i can also test in postman |
Use this section to define your React components and the data architecture of your app. This should be a reflection of how you expect your directory/file tree to look like.
src
|__App.js
|__index.js
|__assets/
|__ components/
|__Layout/
|__Layout.jsx
|__Layout.css
|__Navbar/
|__Navbar.jsx
|__Navbar.css
|__Header/
|__Header.jsx
|__Header.css
|__ screens/
|__Products.jsx
|__ProductDetails.jsx
|__RepairGuide.jsx
|__CreateGuide.jsx
|__EditGuide.jsx
|__containers/
|__MainContainer.jsx
|__ services/
|__api-config.js
|__electronicItem.js
|__repairGuide.js
|__auth.js
| Task | Priority | Estimated Time | Time Invested | Actual Time |
|---|---|---|---|---|
| Create rails app | L | 3 hrs | 0 hrs | 0 hrs |
| Make controllers | M | 3 hrs | 0 hrs | 0 hrs |
| Make Models | M | 3 hrs | 0 hrs | 0 hrs |
| Generate tables | M | 3 hrs | 0 hrs | 0 hrs |
| Add Seed Files | L | 3 hrs | 0 hrs | 0 hrs |
| Add Form | M | 3 hrs | 0 hrs | 0 hrs |
| Create react app | L | 3 hrs | 0 hrs | 0 hrs |
| Create Auth | H | 3 hrs | 0 hrs | 0 hrs |
| Create CRUD for Guide | H | 3 hrs | 0 hrs | 0 hrs |
| product | H | 3 hrs | 0 hrs | 0 hrs |
| Electronic items | H | 3 hrs | 0 hrs | 0 hrs |
| media queries. | M | 3 hrs | 0 hrs | 0 hrs |
| repair guides | M | 3 hrs | 0 hrs | 0 hrs |
| API testing | M | 3 hrs | 0 hrs | 0 hrs |
| Flexbox/css | M | 3 hrs | 0 hrs | 0 hrs |
| Basic css | H | 3 hrs | 0 hrs | 0 hrs |
| Debug | H | 3 hrs | 0 hrs | 0 hrs |
| Deployment | M | 3 hrs | 0 hrs | 0 hrs |
| Deployment debug | M | 3 hrs | 0 hrs | 0 hrs |
| TOTAL | N/A | 54 hrs | N/A hrs | TBD |
post-mvp's would be adding a comment section, instructional video repair guides.
Im proud of this code snippet because it's my dropdown list. i was having great diffiuclty in applying since i wanted the them to be connected by their electronic ID and it after a long struggle of doing so it turned out the fix was very simple which was to change electronic.id into a electronic_id.
<form onSubmit={handleSubmit}>
<select
className="dropdown"
name="electronic_id"
defaultValue="default"
onChange={handleChange}
>
<option disabled value="default">
select electronic
</option>
{electronics?.map((electronic) => (
<option value={electronic?.id} key={electronic?.id}>
{electronic?.name}
</option>
))}
</select>
</form>
one problem problem i had was my crud funtionality, nothing would be created properly due to error 422's and the answer to those was to connect my frontend better to by backend by changing my syntax.