Need help with building a simple web application ( CRUD ) to manage rented items

Hi! I'm trying to write a simple web application for a project, but am having some trouble getting started.

Goal: A simple web application that let’s admin view, add, delete rented items Explanation: Let’s say I am renting a few cars and I would like to see which one is available, which one is occupied, I would like to add new car or delete one. There could also be a admin login at the start.
I guess this is CRUD in a way.

Framework: Vue or React
Problem / Question: How would someone with experiences go about this project? I can watch a tutorial, but when it comes to a real project, I am kind of lost.

Any help or guidelines would be much appreciated.

Comments

[Si]

Here's how I would approach it, without spending too much time whiteboarding/architecting the solution (as it seems like it's a hobby project).

Start on the backend

Database

• How are you going to store the cars and their state ("occupied", "available")? Which database?
• What attributes does the car need (colour, year, make, model etc)?
• Define your database schema, and build your database.

CRUD operations

• Build an API (what's your language of choice?), which can call the Database and create/read/update and delete cars.

Start on the frontend

• Build a frontend that consumes your API and lists the cars, their state, and the attributes.
• Extend the frontend to include a form to create a new car
• Extend the frontend to update a car
• Extend the frontend to delete a car
• Make it look better with styling etc.

Login page

• Do you need this? If you're just starting out, I would try and stay away from this for now. Get everything above working and then come back and get some help as you'll need to create a users table, with password hashes and salts, and be able to handle JWT's etc.

[Jan Kosutnik]

Hi Si, thank for your answer and guidelines, I have answered your questions below:

Database

• Cars state: Occupied, available.
• Car attributes: 3 predefined models ( keeping it simple )

CRUD operations

• What's your language of choice? Was thinking of using Vue, since I am a beginner ( learned some VanillaJs ) and React might be too much of a challenge.

This are also the challenges that I am facing:

• Build a frontend that consumes your API and lists the cars, their state, and the attributes.
• Extend the frontend to include a form to create a new car
• Extend the frontend to update a car
• Extend the frontend to delete a car

Login page - not necessary, but some kind of authentication would be needed.

Like I have said, I am a beginner and I have been going through a Front-End Handbook to expand my knowledge, because there are a lot of unknowns, even with a simple app such as this one, that I need to find answers too.

[Si]

What's your language of choice? Was thinking of using Vue, since I am a beginner ( learned some VanillaJs ) and React might be too much of a challenge.

It sounds like you're only thinking about the frontend. If you want to build an API that your frontend will consume you need to look into a JavaScript framework like Express.js. I recently wrote an article on how to write such an API over on CodeTips, here, that you might find useful.

Edit: If you're just beginning, you might actually find it useful going through some of the more "beginner friendly" articles on CodeTips first.

Edit 2: Also, if you need more real-time feedback/help, there is also a CodeTips slack channel

[Jan Kosutnik]

I know, not used to thinking about the Backend, will checkout Express.js. Thank you for the Slack invite.

[Carlos Silva]

Nice Approach!

[Carlos Silva]

Hi Jan! How are you?

I think you should start simple. Maybe using some available boilerplate like create-react-app could help you to get started fast.

For your application you are going to need some router lib, which I recommend you to use react-router because its simple and have good documentation.

If you have experience with redux I also recommend you to use it only to manage the authentication state that could store the authenticated user. Otherwise I recommend you to use the React Context API and pass the authenticated user to the router to control which routes your user are allowed to navigate to.

I also recommend that you use the json-server package so you can mock the backend API that your app are going to consume.

What I would do before starting writing code is setup some requirements for the application and create a board on [Trello] to organize the tasks and the order I would execute each of them. So my tasks would be something like this:

1. Setup project

Here you can do the installation of your dependencies and setup them. You could define also the routes your application are going to have.

2. Modelling the app state shape

Here you could define how your app data would be structured, as you have said, your cars could have an attribute status where you can control if it is available or not (for example).

3. Implementing the list of cars

4. Implementing the login form

Well... that's only my approach when it comes to develop an application! I hope you will be able to start your project soon with these insights!

[Jan Kosutnik]

Hi Carlos,

Thank you for sharing your approach, nice and simple.
I am all for the simple approach, even if it feels daunting and complex, due to lack of experiences.
Create-react-app seems like a nice starting point. Will have to look into the tools that you suggested.
I am sure that I will find some additional questions, he.

[Carlos Silva]

Ok Jan! If you need any help! We are here for you! 😉

[pradeepchinwan]

I can do for you

[Jan Kosutnik]

I would actually like to do it myself, looking for some advice.