loading...

The most simple stack to create basic CRUD web app with users?

ekafyi profile image Eka Updated on ・3 min read

Background

I’m a self-taught frontend dev at intermediate level. For my day job and a couple of side gigs, I’ve done user authentication, interacting with pre-existing infrastructure/API not built by me. I also know how JWT works.

However, to my distress, I realised that if I were to build a simple web app for users (think To-Do or Notes, where each user will have their own data) on my own… I’d be clueless and not know where to start 😳. Now I felt it’s time to stop being embarassed and start learning by posting this question here.

What is the most simple stack to create a basic personal CRUD web app with the following specs/requirements? For the sake of simplicity, let’s assume it’s a Notes app.

User:

  • App can have many users.
  • User can create a new note.
  • User can view and manage (edit, delete) their existing notes.
  • Only the user can edit or delete their notes.
  • User can manage their notes from any browser/device. (So localStorage or sessionStorage is out.)
  • Everyone else can view user’s notes through a public URL.
  • Notes shall not contain sensitive data.
  • User shall be required to give as little amount of personal data and go through as little steps as possible to use this app.
  • User might not be a tech person (= may not have Github/Netlify account).

Dev (ie. me):

  • I have intermediate skill in JS; near zero skill in backend or DevOps (setting up server, do I need CI/CD, Docker, etc).
    • Yes I know I eventually have to learn the latter. For now though, I hope to create an app with minimum amount of backend & devops work.
    • I do have basic understanding of backend-related JS frameworks like Express and Koa.
  • I’ve been into Svelte. But React, Vue, or vanilla JS is also fine.
  • I’d like to keep the code open source.
  • Free services only please.

(Sidenote: I know I can create a remixable app on Glitch. But in this case, I’d like to know how to do it differently.)

I found my main problem lies with TWO aspects: (1) user authentication and (2) data storage. I did some research and found the following solutions. Now I need help with how and what to choose.

Problem 1: User authentication

  • Google Sheets
  • Firebase
  • Auth0 (7,000 free active users & unlimited logins, good enough)

Problem 2: Data storage

  • Google Sheets
  • Firebase
  • Free tier of Contentful, Sanity, or other similar service? It would not be sustainable if there are many users. 🤔

…No user authentication?

I found this interesting example in marinaratimer.com:

  • User can create a new timer.
  • Once a timer is created, user gets two unique links:
    • “viewer link”, eg. marinaratimer.com/KwAuW
    • “administrator link” to edit the timer, eg. marinaratimer.com/iBblB
      • This is a public link; user is simply told to keep it private. 🤯

screenshot of marinaratimer.com


Would be grateful for any advice, and/or just share your experience building this type of web app! 🙏🏽


🍦 UPDATE: Thank you all for the responses! I decided to go with a Svelte + Sapper + Firebase (Firestore and hosting) for this project. For future projects I'd probably look into Express and MongoDB. I hope the answers here may be useful for others, too.

Discussion

pic
Editor guide
Collapse
momander profile image
Martin Omander

Here is what I recommend, based on your experience, requirements, and optimized to get you a working prototype quickly.

Front-end code: plain vanilla JavaScript or Svelte. Why? Stick with what you know. You can always learn a new framework later and add it if you want.

Back-end code: none. Why? You said that you want to minimize your DevOps work. Less back-end code equals less back-end work.

Authentication: Firebase Authentication. Why? You can copy and paste their JavaScript code into your client. It lets your users log in with their Google, Facebook, Twitter, etc accounts. Also, it plays nice with Firebase/Firestore. (It uses JWT under the hood, but you don't have to deal with the tokens yourself).

Data storage: Firebase/Firestore. Why? The data is stored on the server, so your users can switch devices and still access their data. But you don't have to write any server-side code. You can configure Firebase/Firestore to let all users read all Notes, but only write their own Notes, for example.

Hosting: Firebase Hosting. Why? You don't want to deal with server configuration and setup, CI/CD, Docker, etc. You just want to get the HTML and Javascript working on your local machine, and then deploy it to a public URL in the cloud, with a single command.

All products mentioned above have generous free tiers and work well together. The last app I built using these products was able to support thousands of users per day under the free tier. It all depends on your app's usage patterns of course, so you should read up on exactly what's included for free before you make your decision.

Sounds like a fun project. Best of luck!

Collapse
codenamejason profile image
Jaxcoder

I have a site on this now for a client demo. Sorry, can't share it :(

Collapse
sujaykundu777 profile image
Sujay Kundu

Hi Eka ! I would suggest to check out the Node React and Firebase stack, Firebase will help you with many things especially with Hosting , Auth and Data Storage.. and you can just use their SDK to integrate with any of your Web or Mobile Apps with the help of it. Most importantly it's Free to start with 🙂

Collapse
ekafyi profile image
Eka Author

Oh cool. I've briefly used Firebase Cloud Messaging (to send push notifications) before but hadn't got the chance to learn about the other Firebase services. Thank you Sujay!

Collapse
sujaykundu777 profile image
Sujay Kundu

Yeah ! You should definitely check them out 🙂

Collapse
codenamejason profile image
Jaxcoder

This follows up to what I was getting at for user logins, that way you don't have to store passwords. The React-Firebase is a good starting point for the free side.

Collapse
savagepixie profile image
SavagePixie

You can do all that with Node+Express and a database. MongoDB is easy because it stores information in documents that are basically JSONs. Also, if you don't want to mess with Docker yet, you can get a free account at MongoDB Atlas.

For authentication, there's a prettt popular library called passport which also allows you to use Google/Facebook/etc authentication, so you needn't worry about creating and storing passwords.

Collapse
ekafyi profile image
Eka Author

Oh wow. So I've been hearing about MongoDB here and there, but I assumed it was like regular SQL database (which I'm rather wary of) and I never looked into it further 😝. I just skimmed through the website, I like the familiar syntax. Thanks so much!!

Collapse
sujaykundu777 profile image
Sujay Kundu

Mongodb is a Nosql database and non relational, different from any sql db like MySQL or postgresql. Benefits are it stores data in json format. Which helps in integration with rest frameworks easily 🙂

Collapse
f94olivera profile image
F94Olivera

I don't know if it exists a similar tool in JS but Django has this very well resolved, in fact you just designed what you want, what types of inputs you have (string, number, date) and Django solves it for you. Sorry for not being a full answer maybe someone can enlight you better

Collapse
ekafyi profile image
Eka Author

If I start learning Django I'll keep this in mind. Thanks!

Collapse
rolfstreefkerk profile image
Rolf Streefkerk

Your best bet is a toolsuite that automates a lot of this, Firebase has been mentioned that is Google owned. Amazon Web Services has AppSync, it does everything you need, authentication, data storage (NoSQL), push notifications etc. etc.

It has a CLI tool to set everything up with SDKs for Node and for mobile app development.

Collapse
codenamejason profile image
Jaxcoder

This is a decent setup for sure.

Collapse
hopemanryan profile image
Ryan Hoffman

authentication is a tricky thing to learn, due to some key words like jwt bearer outh2 and stuff like that. I would initally start with an email verification. as in does this request contain an email of a user that saved in my system.

if you dont want to use your own server thats fine, you have firebase. but for the learning process I would use express and mongo, two pretty easy things to pick up.

Collapse
gkosmo profile image
George Kosmopoulos

so you want a backend framework. Rails and Django are easy, easier even if you know ruby or python. As a JS person, I'd advise MeteorJs, which is a fullstack framework, easily deployable ( with heroku for example)

Collapse
jankapunkt profile image
Jan Küster

Meteor comes with authentication and Mongo bindings out of the box. Setting up crud methods takes not that long. If you want to try it, you can create the built-in example project which is a simple todos app.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

As for me, I have a little problem with Firebase permission; if not logged in, and not using firebase-admin. Heroku + MongoDB is a goto for me.

If you schema is stable, PostGRES might be OK. I hate ALTER TABLE.

For authentication, I use Auth0.

Why would you use Google Sheets? If not for sake of viewing, I would not use it, not even Google Sheets API.

Collapse
brettstark73 profile image
Brett Stark

This is super interesting also with the answers below.

Is anyone aware of

  • a more detailed list of application / SAAS types
  • possible technical solutions (high level) for each
  • pros / cons

?
Would love to read and learn from or create such a reference!

Collapse
malixsys profile image
Martin Alix

I extracted my favorite starting point...
github.com/malixsys/typescript-nod...

  • Fast startup and reloads
  • Okta auth and easy role based express middleware authorization
  • Mongodb storage
  • React Front
  • Dependency injection for easy server config
Collapse
akshay_nm profile image
Akshay Kumar

I am also new and don't know much about auth but how hard could it be. 😅🤔
I would have gone with a mongoose+express for CRUD API. Express+EJS for hosting static content.
VanillaJS+RXJS for anything related to frontend.
If it was a real-time chat, or we needed some sort of event driven communication between the server and the clients I would use Socket.io instead of/with REST(Express+mongoose) API.

Collapse
brandinchiu profile image
Brandin Chiu

With a database and hosting sorted out you could have a crud app ready to go in 15 minutes with Drupal, which is a cms framework written in PHP.

You would then be able to focus on functionality specific to your use case. There's a full ecosystem of Drupal developers that exists for adding extensions and additional functionality easily (like auth, etc).

It's definitely NOT modern though, if that's a factor you're looking for.

Collapse
kksrini89 profile image
Srinivasan K K

@eka ,
IMHO: Irrespective of UI Javascript Framework, we can straight away start using Firebase service (under One umbrella multiple service). documentation and API is so simple enough.

Collapse
rickthehat profile image
Rick G.

How was your experience using Sapper + Firebase? I also like to find the latest tech that simplifies app building with users and making it fast but we're still not there yet. I'm currently looking at Netlify, Svelte/Eleventy + FaunaDB as a possible solution.

Collapse
ivicacevis profile image
Ivica Čevis

I am also searching for easiest way to make web app CRUD with datatables editor options.
I have some basic knowledge of SQL and JS for Adobe LiveCycle Designer.
Following dynamic xml form is what I have now and this form I want to recreate as CRUD web app:

  • so far I have mysql database locally, and following tables: users, association, 9 different tables for books, permissions
  • 3 types of users (admin, manager and customer.)
  • customer can have one or more Associations, each association has 9 different books.
  • books are like tables with header (sorting, and filtering), footer paging, with buttons to add, remove, reorder rows.
  • customer login > chooses association > for chosen association are loaded all available books > customer chooses desired book and must choose year from drop down menu > if the year is not current > loaded data are read only, if year is current, inserting new data is possible.
  • calculations per row + previous row.
  • export to pdf with custom header and footer (book name, year of the records) - taken from database
  • admin and manager can enable or disable books for editing and enable read only mode for books after certain date in year (31. January) - customer can only read and export data for previous year not edit the data for previous years.

What do you recommend?

Collapse
codenamejason profile image
Jaxcoder

Could you use Auth0 passwordless configuration. They have a free tier, but not sure where the scale maxes out. Does the data have to be private? Can it be public?

Collapse
artemis profile image
Diane

I'd say either ASP.NET with generated pages, or Spring Boot, with CrudRepository.

Collapse
ekafyi profile image
Eka Author

Forgot to say I have not learned ASP.NET or Java (which Spring Boot is based on), lol. But thanks, I'll keep this in mind if I start learning those!