It’s important to note that timeline trackers come in various forms and serve multiple purposes. Tools like Google Maps Timeline can track places visited, offering functionality for mileage logs, while apps like Timelines provide insights into time management through interactive timelines and charts. In Excel, timelines can be created with sub-events, offering a structured event-tracking approach. This post focuses on a custom-built solution, but understanding the broader landscape of timeline tracking tools, such as Toggl Plan, Timely, and Monday, can help tailor a solution to specific needs.<\/p>\n\n\n\n
Check out the live demo<\/a> and the GitHub Repository<\/a>.<\/p>\n\n\n\n Cloudinary<\/a> provides a secure and comprehensive API for uploading media files fast and efficiently from the server side, the browser, or a mobile application. We can upload media assets using Cloudinary’s REST API or client libraries (SDKs) which makes integrating with websites and mobile apps more accessible.<\/p>\n\n\n\n Xata<\/a> is a serverless data platform that enables us to manage, scale, prevent downtime, cache, and maintain our database to improve our development workflow. Additionally, it offers a relational database, an effective search engine, and much more.<\/p>\n\n\n\n Before getting started with this tutorial, we should have the following:<\/p>\n\n\n\n To proceed, let us clone the starter project in our preferred directory with the git command below:<\/p>\n\n\n Run the following command to install all dependencies using the Or Run the following command to install all dependencies using the We should have something similar to what we have below.<\/p>\n\n\n\n In this section, we will set up a Xata<\/a> profile by signing up<\/a> for a new account or log<\/a> in<\/a>. We will get redirected to our dashboard after successful sign-up, as shown below.<\/p>\n\n\n\n Next, we will click We will create a table called Add the following columns to the What is Cloudinary?<\/h2>\n\n\n\n
<\/a>What is Xata?<\/h2>\n\n\n\n
<\/a>Prerequisites<\/h2>\n\n\n\n
\n
<\/a>Project Setup and Installation<\/h2>\n\n\n\n
git clone<\/span> https:\/\/github.com\/Olanetsoft\/Timeline-Tracker-with-Cloudinary-Xata-and-NextJs\/tree\/starter<\/span>\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\nyarn<\/code> package manager.<\/p>\n\n\nyarn && yarn dev\n<\/code><\/span><\/pre>\n\n\nnpm<\/code> package manager to start the project on http:\/\/localhost:3000<\/a>.<\/p>\n\n\nnpm install && npm run dev \n<\/code><\/span><\/pre>\n\n\n![\"Timeline](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222234\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-1.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\n<\/a>Creating and Setting Up Xata<\/h2>\n\n\n\n
![\"Idris](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222236\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-2.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\nAdd a database<\/code>, enter our preferred database name*, and<\/strong>* click<\/em> create<\/code>. We will be redirected to the database page similar to what is shown below.<\/p>\n\n\n\n![\"Add](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222239\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-3.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\nusers<\/code> to save all the records of users that signed up on our platform, as shown below.<\/p>\n\n\n\n![\"Create](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222242\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-4.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\n![\"Create](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--4406vlNi--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800\/https:\/\/paper-attachments.dropboxusercontent.com\/s_5E340A634021481AD57D8D34688E6D339A5BA872FD7F90FC7DCC96BFBF1069A6_1669246644591_Screenshot%2B2022-11-24%2Bat%2B00.33.30.png\")
<\/a><\/figure>\n\n\n\nusers<\/code> table:<\/p>\n\n\n\n
![\"Get](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222245\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-5.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\n![\"Copy](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222248\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-6.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\n![\"Xata](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222250\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-7.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\n![\"Set](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222253\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-8.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\n![\"API](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222258\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-9.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\n![\"Xata](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222261\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-10.jpg\"){kind=tracking}
<\/a><\/figure>\n\n\n\n![\"Cloudinary](\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/v1764222264\/blog-Build_a_Timeline_Tracker_With_Cloudinary_Xata_and_Next.js-11.png\"){kind=tracking}
<\/a><\/figure>\n\n\n\n