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. 🤯
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.
Top comments (25)
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!
I have a site on this now for a client demo. Sorry, can't share it :(
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 🙂
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!
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.
Yeah ! You should definitely check them out 🙂
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.
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!!
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 🙂
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
If I start learning Django I'll keep this in mind. Thanks!
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.
This is a decent setup for sure.
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)
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.
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.
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.
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.
This is super interesting also with the answers below.
Is anyone aware of
?
Would love to read and learn from or create such a reference!
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.
I extracted my favorite starting point...
github.com/malixsys/typescript-nod...
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.
@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.