DEV Community: Manali Biswas

A News PWA website using GitHub Codespaces

Manali Biswas — Sun, 14 May 2023 09:34:53 +0000

What I built

I made a PWA news website using React with GitHub Codespaces.

Category Submission:

Phone Friendly

App Link

https://manali-biswas.github.io/news-website-with-codespace/

Screenshots

Description

Website that displays top headlines on various topics and their description. Built using GitHub Codespaces! ❤️

Link to Source Code

https://github.com/manali-biswas/news-website-with-codespace

Permissive License

MIT License

Background (What made you decide to build this particular app? What inspired you?)

It was quite a while since I had done a personal hands-on project. One random day I landed on the GitHub+DEV hackathon page, and boom! Motivation flowed to learn more about GitHub while building something new and quick for myself. Currently the website is not in a very polished state, but I intend to keep working on it and improving it!

How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?)

While going through the GitHub+DEV hackathon article, I noticed something called GitHub Codespaces. I had never tried this before, so I quickly started going through its docs to satisfy my curiosity and get started on a project.
GitHub Codespaces was incredibly easy to use, and it got me started for my React app in no time! I wanted to build something quacky and fun for myself, so I decided to go for a news website, which I can use all the time and keep adding features which I like.
I really had fun participating in the hackathon, and I am going to keep using GitHub Codespaces for more projects, as it requires much less time and overhead than setting up a project environment locally!

Additional Resources/Info

The project uses a news api with limited number of API requests, will plan to improve the UI in this case in future!

A Productivity Web app from scratch!

Manali Biswas — Thu, 10 Dec 2020 13:00:15 +0000

My Productivity Buddy

Intro

With so much free time during lockdown, I thought about doing a project that would help me learn a lot of things. So, during Hacktoberfest 2020, I decided to build a productivity web application, as a part of which I would be exploring some calendar APIs, building a calendar from scratch and much more!

Most of my project is done, finally. Only some finishing touches and later improvements remain. So, I am sharing how exciting the learning was and what challenges I faced.

A Roller-Coaster ride

Start and High Point

I made the web application using HTML, CSS, JS, Node and MongoDB. Firstly, I focused on the primary requirements of the project. I included features of making, saving and editing timers, tasks and events. Tasks involved nothing much except a proper schema. Making a timer was a new thing for me. I made it using JS. It was a bit challenging to set the countdown time interval from the values taken from the view (I didn't use AJAX for this) and popping the 'Time Up' etc. at the right time, but it was real fun! When I finally finished with it, I had a cute timer (with an alarm that mom hates) and I can now edit, save and delete my tasks and timers and use them any time later conveniently.

High Point to Low Point

Next, I took on the challenge of building a calendar from scratch. I have never done it before, nothing to the likes of it. Doing it without React meant more lines of code. But I do not have a great hold over React, and I had already started developing the application without it, so I decided to continue. With blessings from the Dev community and other online resources, I managed to make a calendar with views of namely 'Day', 'Week', 'Month', 'Year' and 'Decade'. I had no experience with AJAX before this, and it was during making this calendar that I learned it. I was almost stuck at the point when I wanted to make my calendar jump from one view to the next and increment or decrement dates...

Low Point to High Point

For the different views of the calendar, I used partial views. To make the calendar interactive, I have used AJAX calls to get the views with proper dates whenever the user clicks on that view (or lower views in higher views, like a day in a particular month). The 'Day', 'Week' and 'Month' views show all the events for the days, which can be edited or deleted. So finally, I was able to make and save events after I finished with the self-made calendar!
With AJAX by your side you can reach the moon.

Firm Ground at Last!

Next comes integrating OAuth2. I had planned to explore the Google Calendar API and Microsoft Outlook API as part of this project, so adding OAuth2 comes along unconditionally. This is the first time I worked with OAuth2. Before this, I have only used them in Python projects. So, I included Google and Microsoft authentication, and for now users can view their upcoming events in the next 24 hours. The major challenges I faced in this were finding the right passport module for Microsoft and integrating the accounts with existing user accounts. After going through a lot of articles, I was finally able to accomplish all of the targets I set on initially.

Celebration

Last, but not the least, I learned many more useful things such as using main, header, footer and sections in HTML, full screen sections and much more. I had a lot of fun doing this project (I worked on it alongside my semester, which might have hampered my performance a bit :P). I believe this is one of the best projects I have worked on so far, and learning so much in such a small time period was awesome. I started this project in mid-October this year and finished it today, i.e., 10th December 2020.

For all of this, I am really grateful to the online coding communities that keep providing answers to all questions, thus accelerating our learning process.

Feedback Required

I request you to check out my project here, like the project, fill the feedback form there and please leave your comments and suggestions below. It would be really helpful!!!

If you like the website, please star my repo here

manali-biswas / MyProductivityBuddy

A one stop-shop to have productive days seamlessly!

Cheers!

HACKTOBERFEST 2020

Manali Biswas — Thu, 29 Oct 2020 06:15:23 +0000

About Me

Hi! I am Manali Biswas. I am new to the DEV community as I joined it during Hacktoberfest this month. I am a Computer Engineering student at Delhi Technological University. This year, I heard a lot about Hacktoberfest, with all the messages floating on social media. After understanding that its a celebration for open source, I decided to dump my laziness and go make at least 4 PRs!

Background

Before this, I had participated in GirlScript Summer of Code 2020. That was my first experience of participating in a large-scale open source coding. I learned a lot of things that time, like making a pull request and contributing to node.js web applications. I like to make web applications (MERN stack) and have started exploring ML now.

Progress

To be honest, I started off Hacktoberfest as a pastime. But then, I realized that I can try out something new and create something that I will love to look back to. So, I have started working on a Productivity web app, in which I will be exploring some calendar APIs. So far, I have integrated Google Calendar API and made a webpage to enable the user to set up timers. My Hacktoberfest is complete for this year and I have ordered my swag too!

Contributions

I have contributed to a DS-ALGO repo by adding stack and queue stl C++. In that, I have made a program using many of the stl functions provided for queue and stack. There were some things which I learned, e.g., emplace function. Apart from that, I made the timer and Google Calendar API integrations to my productivity app, and added some styling.

Reflections

Overall, my Hacktoberfest 2020 was good, I learned some things and it was a good experience. I did not have much idea of Hacktoberfest before, and now that I do, I think it is a great initiative. It is highly encouraging to see such fests, because open source gives birth to a lot of new ideas. I would love to participate again, and contribute to open source!

Just finished the 4 Hacktoberfest 2020 PRs.

Manali Biswas — Thu, 15 Oct 2020 02:59:02 +0000

Finished the fours PRs in time. Also, I have started exploring calendar APIs for a productivity web app during this!