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.
Top comments (10)
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
CRUD operations
Start on the frontend
Login page
Hi Si, thank for your answer and guidelines, I have answered your questions below:
Database
CRUD operations
This are also the challenges that I am facing:
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.
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
I know, not used to thinking about the Backend, will checkout Express.js. Thank you for the Slack invite.
Nice Approach!
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!
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.
Ok Jan! If you need any help! We are here for you! 😉
I can do for you
I would actually like to do it myself, looking for some advice.