Gita Web App v1.0 (Open Source), Pathway to Self-Learn Next.js Web Dev with Tailwind CSS and TypeScript

Last updated on 29 Jul. 2024
Minor update on 1 Oct. 2024

Quick Info

Details



[On PC desktop/laptop, to open pic in larger resolution (if available), right-click on pic followed by open link (NOT image) in new tab/window. In new tab/window you may have to click on pic to zoom in.]

Above pics of home page of Gita web app v1.0 as seen on desktop PC.

I have enhanced the Very Simple Gita web app to a regular web User Interface (UI) app using Tailwind CSS. The app also now uses TypeScript. As, from a source code point of view, it no longer is a very simple Gita app, I am calling it Gita app. though the current version 1.0 is still a simple web app. Addition of some more features may make it more like a regular web app.

The Gita web app v1.0 can be run at: https://gita-rsi.vercel.app/ and this is its Github repository (source code): https://github.com/ravisiyer/gita. This version has been published as a release on GitHub with tag 'v1.0'. Note that the app is open-source and freeware. So anybody is free to adapt and reuse it for their needs.

I have made informal but detailed notes of the enhancement work I did to get to this stage, which is put up as a post: Notes on regular UI Bhagavad Gita Nextjs web app. built on top of very simple Gita app. So college students and other self-learners can use it to self-learn Next.js, Tailwind and TypeScript to the level needed for an app like this, for free (without paying any coaching fees). The coding complexity of the app is significant and so may overwhelm learners new to Next.js. Such learners should first study the source code of Very Simple Gita app and the pathway I followed to get there. After that they can look at the source code of this Gita app v1.0. However, they can use this Gita app v1.0 right away to know what they will be able to develop if they follow the full pathway I have documented.

If they are new to web development or new to React, they can follow the roadmap I have suggested in the following post, but omitting MongoDB and Mongoose and having only minimal exposure to Node and Node Express, as Next.js provides server side development ability as well: Roadmap to Learning Full Stack (MERN) Web Development Beginner Level Through Free Online Tutorials.

Some more screenshots of the Gita app v1.0 as seen on PC desktop are given below.






Given below are some screenshots of Gita app v1.0 on mobile in portrait mode.



 






Given below are some screenshots of Gita app v1.0 on mobile in landscape mode. Note that the black bar on the left is not shown on mobile when using the app, but is introduced by screenshot feature on my Samsung M21 mobile.





Comments

Post a Comment