{"id":20964486,"url":"https://github.com/bilalmohib/astra-db-todo-app-crud","last_synced_at":"2026-04-16T06:01:41.420Z","repository":{"id":183623683,"uuid":"670040787","full_name":"bilalmohib/Astra-DB-Todo-App-Crud","owner":"bilalmohib","description":"Todo app performing CRUD operations with AstraDB(Cassandra DB) APIS. Used Next JS APIS.","archived":false,"fork":false,"pushed_at":"2023-07-30T23:19:11.000Z","size":569,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-13T07:36:14.747Z","etag":null,"topics":["astradb","beginner-friendly","blog","cassandra-database","crud-application","crud-operation","database","datastax-cassandra-driver","front-end","fullstack-development","nextjs-boilerplate","nextjs13","serverless","todo","todoapp","todolist","typescript"],"latest_commit_sha":null,"homepage":"https://astratodo.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bilalmohib.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-07-24T06:59:03.000Z","updated_at":"2023-07-30T23:22:29.000Z","dependencies_parsed_at":"2023-09-07T11:29:50.302Z","dependency_job_id":null,"html_url":"https://github.com/bilalmohib/Astra-DB-Todo-App-Crud","commit_stats":null,"previous_names":["muhammad-bilal-7896/crudcassandradbnextjs","bilalmohib/astra-db-todo-app-crud"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bilalmohib/Astra-DB-Todo-App-Crud","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bilalmohib%2FAstra-DB-Todo-App-Crud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bilalmohib%2FAstra-DB-Todo-App-Crud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bilalmohib%2FAstra-DB-Todo-App-Crud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bilalmohib%2FAstra-DB-Todo-App-Crud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bilalmohib","download_url":"https://codeload.github.com/bilalmohib/Astra-DB-Todo-App-Crud/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bilalmohib%2FAstra-DB-Todo-App-Crud/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31873606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astradb","beginner-friendly","blog","cassandra-database","crud-application","crud-operation","database","datastax-cassandra-driver","front-end","fullstack-development","nextjs-boilerplate","nextjs13","serverless","todo","todoapp","todolist","typescript"],"created_at":"2024-11-19T02:55:11.735Z","updated_at":"2026-04-16T06:01:41.367Z","avatar_url":"https://github.com/bilalmohib.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to perform CRUD operations with serverless Astra DB and Next JS(Front-End) to build a Full Stack Todo App\n\nHi fellow developers and database enthusiasts, today I would like to share a step-by-step guide following which you will be able to understand and use **Apache Cassandra** along with **NextJS13** in your projects.\n\n# Table of Contents\n\n1. **Getting Started**\n2. **What We Are Going to Build?**\n3. **Technologies We Are Going to Use**\n4. **Are Apache Cassandra and Serverless Astra DB Different?**\n5. **Pre-requisites for Following This Article**\n6. **Introduction to Cassandra**\n\n   - I. How Cassandra Was Innovated\n   - II. Cassandra Usage At Big Tech Companies\n   - III. Features of Cassandra\n   - IV. How Cassandra Works\n   - V. How Cassandra Replicates Data\n   - VI. How Data is Structured in Cassandra\n   - VII. Let's Understand Through an Example How Cassandra is Structured\n\n7. **Creating a New Astra DB Database**\n8. **Using CQL Shell to CREATE TABLE \"todos\" and Insert Some Data**\n\n   - I. Opening the CQL Console\n   - II. Creating Table \"todos\" Using the CQL Console\n   - III. Inserting Some Data into the \"todos\" Table\n   - IV. Viewing the \"todos\" Table Data in CQL Console\n\n9. **Creating a New NextJS (Front-End) Project**\n10. **Writing the NextJS APIs to Interact with Astra DB**\n\n- I. GET Request\n- II. POST Request\n- III. PUT and DELETE Requests\n\n11. **Testing the Astra DB APIs**\n12. **Writing the Front-End Part of the Todo App**\n\n- I. Writing the Components\n  - a) TodoList ⌚️\n  - b) SnackBar 🔔\n  - c) Footer ℹ️\n  - d) Creating the Types of Components\n- II. Creating the Todo App Pages\n\n13. **Starting Our Project**\n14. **Conclusion**\n\n\u003cbr/\u003e\n\u003chr/\u003e\n\u003cbr/\u003e\n\n# \u003cu\u003e1- Getting Started With Repo\u003c/u\u003e\n\nFirst Clone the repo\n\n```bash\ngit clone https://github.com/Muhammad-Bilal-7896/CRUDCassandraDBNextJS\n```\n\nThen install the dependencies\n\n```bash\nnpm install\n```\n\nThen create a `.env.local` file in the root directory and add the following\n\n```bash\nREACT_APP_ASTRA_DB_ID=70271e02-9616-4b61-8902-f8cd73d5b470\nREACT_APP_ASTRA_DB_REGION=us-east1\nREACT_APP_ASTRA_DB_KEYSPACE=live_coding\nREACT_APP_ASTRA_DB_TOKEN=AstraCS:UMHldokDeYIhSkNHRHDuIShI:71cef8c7f57909521b2eb550d593e8cf0bc399521633e8fc5c525fa8ee2cb928\n```\n\nThen run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n# or\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nFor detailed explanation on how I built this app, read below.\n\n# \u003cu\u003e2- What We Are Going to Build?\u003c/u\u003e\n\nWe are going to build a simple todo app that will use Apache Cassandra to store the todos, and addition, deletion, and update of todos will be handled by Apache Cassandra.\n\nWe will discuss the following in detail:\n\n- Overview of Apache Cassandra\n- Cassandra Data Modeling\n- Cassandra DB Structure\n- Creating a new serverless Astra DB Database and utilizing its API using NextJS that will perform CRUD (create, read, update, delete) operations utilizing Astra DB\n- Build a front end using Next JS to utilize that API\n\nAt the end of the article, we will be ready with a full stack Cassandra DB todo app. I will do everything from scratch so that every beginner can understand, and everything will be step by step.\n\n# \u003cu\u003e3- Technologies We Are Going to Use\u003c/u\u003e\n\n- **Database**: Apache Cassandra, Astra DB\n- \u003cb\u003eFront End\u003c/b\u003e: Next JS\n- \u003cb\u003eUI Libraries\u003c/b\u003e: Material UI, Tailwind CSS\n- \u003cb\u003eLanguage\u003c/b\u003e: TypeScript\n\nThis project will not only add a new \u003cb\u003edatabase skill\u003c/b\u003e, but you will also learn how to develop and use \u003ca\u003eAstraDB\u003c/a\u003e with a \u003cb\u003efront end (NextJS)\u003c/b\u003e. I hope you will be able to follow everything step by step. Otherwise, if you face any difficulty, you can always reach out to me or comment on the post. I will be happy to help you resolve the issue.\n\n\u003cimg\nsrc=\"./ReadmeContent/AddTodos.gif\"\nalt=\"Add todos\" title=\"Cassandra DB Todo App\"/\u003e\n\nA full stack Next js + Cassandra Db \u003ca target=\"_blank\" href=\"https://astratodo.vercel.app/\"\u003eTodo app\u003c/a\u003e that will perform all major \u003cb\u003eAstraDB database\u003c/b\u003e functions this guide is designed for this purpose. \u003cbr/\u003e\n\u003cu\u003eLive Astra DB Todo App:\u003c/u\u003e \u003ca target=\"_blank\" href=\"https://astratodo.vercel.app/\"\u003eTodo app\u003c/a\u003e \u003cbr/\u003e\n\u003cu\u003eGithub Source Code:\u003c/u\u003e \u003ca target=\"_blank\" href=\"https://github.com/Muhammad-Bilal-7896/CRUDCassandraDBNextJS\"\u003eSource Code\u003c/a\u003e\n\n# \u003cu\u003e3- Are Apache Cassandra and Serverless Astra DB Different?\u003c/u\u003e\n\n**Astra DB** is a serverless database like Firebase that is built using **Apache Cassandra** and is fully hosted and managed by **DataStax** so developers can easily use it without building the backend. So it can be used on the front end without building the API just as if any of you have used Firebase, Astra DB by DataStax is similar to that. \u003cbr/\u003e\nCassandra DB is a free and open-source, distributed, wide-column store, NoSQL database management system designed to handle large amounts of data across many commodity servers, providing high availability with no single point of failure. \u003cbr/\u003e\nWe will be using **Astra DB** provided by **DataStax** to use **Cassandra DB** throughout this article.\n\n# \u003cu\u003e4- Pre-requisites for following this article\u003c/u\u003e\n\u003cp\u003e\n1. JavaScript basic knowledge\n2. Rest API's basic knowledge\n3. NextJS basic concepts\n4. NodeJS basic knowledge \n\u003cbr/\u003e \nNow let's first understand what is \u003ci\u003eCassandra\u003c/i\u003e\n\u003cbr/\u003e\n\n# \u003cu\u003e5- Introduction to Cassandra\u003c/u\u003e\n\u003e \u003ci\u003e\"Cassandra is an open source and free database written in java and is a wide column store nosql database famous for its ability to distribute petabytes of data with unmatched reliability and performance\".\u003c/i\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbilalmohib%2Fastra-db-todo-app-crud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbilalmohib%2Fastra-db-todo-app-crud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbilalmohib%2Fastra-db-todo-app-crud/lists"}