In this post we are presenting you a Full-Stack Todo App, which is built in React.js, Next.js and Sequelize Sqlite3, and it is responsively implemented according to different screen sizes (see the code at the post bottom).
Tech Stacks
- React.js
- Next.js
- Fetch API
- Node.js
- Express
- Sequelize Sqlite3
- CSS
Make User Experience Better…
Advantages
- Fast User Experience. Paginations handled in backend, each http request from client side only responses ten todos in one page, avoiding huge data fetching.
- Applied Next.js, very clear web page structure. Separated Log page and Todos page.
- Clean models designed using Sequelized Sqlite3 and perfectly complex data types handled, like Json Array, using setter and getter methods.
- Well state management by using React Context, very clear and accurate of passing necessary data object down to the whole DOM tree.
- Applied media-query to implement the responsive design according to different screen sizes.