DEV Community: mismathh

Integrating Google Authentication to Chat Application - Progress

mismathh — Mon, 11 Dec 2023 08:36:21 +0000

As discussed in my last post, my current focus has been on implementing an alternative authentication method to log in into Chat Application. In this update, I wanted to share the progress I have made.

Integrating OAuth 2.0 and Google API with Passport.js

My initial thoughts to this step was that it was going to be more code heavy, but it ended being more to do with acquiring certain values from Google to be able to connect to the API.

In order to use Google authentication with OAuth 2.0, the relevant "Strategy" library is needed from the passport-google-oauth2 package. With that, we can use passport.use() to create our Strategy to be used when users log in with Google.

passport.use(
    new GoogleStrategy(
      {
        clientID: process.env.GOOGLE_CLIENT_ID,
        clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        callbackURL: "http://localhost:3000/auth/google/callback",
      },
      authenticateGoogleUser
    )
  );

To connect to the Google API, a clientID and clientSecret key is needed. The Google Cloud Platform is where you can acquire these values after creating a project to link with your application.

Front-end User Interface

I decided to create a simple button to provide the option for users to login with their Google accounts, and kept the dark tone to match the rest of the page.

Back-end Routes

Two routes needed to be created to handle Google authentication requests. The /auth/google route will be called once the user clicks on the button to log/sign in with Google. This will redirect the user to the Google OAuth consent screen where they will need to choose a Google account to log in while accepting that some information from Google will be passed to the app.

In this case, the scope is what defines what information we are requesting from Google. There are many other values that may seem important to you, such as email, etc., but for the purpose of this app, the profile scope contains a unique id that we can store in our database to verify the user.

app.get('/auth/google',
  passport.authenticate('google', { scope: ['profile'] })
);

The second route will be called after we have verified and retrieved the information back from Google. If it was successful, it will redirect the user to the / page, and to the /login page if verifying the user was unsuccessful.

app.get('/auth/google/callback', passport.authenticate( 'google', {
    successRedirect: '/',
    failureRedirect: '/login'
 }));

Passport Names

One of the hiccups I faced when implementing this alternative authentication, was the functionality of signing in through local or Google authentication, and to have both functional at the same time. Having multiple passport strategies places more importance on the name of the strategy, and to call the correct one for certain routes. I've only used the passport-local package in my projects thus far, and when trying to use authenticate(), the name of the strategy was always local, which made sense at the time. "The package is called passport-local so the name to use should be local." That kind of thought process won't work for passport-google-oauth2. I was planning to use a new name for the Google passport strategy, but I honestly got lucky, as I typed in "google" for the passport name and it worked, but where did this come from?

I did a little digging and found out that for each of these specific "Strategies" that you download, the default name is set within the strategy (or module) itself. When you require the the module, it exports a Strategy constructor function that sets the default name:

// Inside the passport-google-oauth2 module
OAuth2Strategy.call(this, options, verify);
  this.name = 'google';

Therefore, if you are using multiple specific passport Strategies, instead of creating new names, you could also just look for the default name that is set within the module.

Pull Request

All these changes can be found in my PR, which currently needs to be reviewed first until it can be merged.

Implementing Alternative Authenticate Feature

mismathh — Sat, 09 Dec 2023 03:23:42 +0000

As I continue on my open-source journey, I wanted to dive more into issues that revolved around JavaScript and Node.js, and preferably wanted to implement a new feature that I haven't implemented before. I found a project which I was interested in working on called Chat Application, which is a chat platform that allows users to send messages in newly created chat rooms and engage in conversations with others in real-time.

Issue

The issue is to implement an alternative authenticate feature that allows users to sign-in/log-in with their Google accounts. The issue can be found here.

Approach to Tackling the Issue

Authenticating with Google

The owner of the project stated that OAuth 2.0 needed to be used for the authentication, and so the first step to completing this issue is to understand how to integrate OAuth 2.0 authentication with Google for a Node.js server. A quick Google search led me to the use of Passport.js which I have been exposed to, so I plan start there and work my way up.

Front-end & Back-end Changes

Along with integrating OAuth 2.0, I'll need to update the back-end to handle the Google requests and authentication tokens and also store the relevant data. I'll also need to update the front-end to display the Google sign-in component so that users can actually use it.

Testing

Since this is a new feature that will be implemented, thorough testing will be required to ensure that it functions as expected. Over the past few months, I have been exposed to Jest and I'm quite fond of it, and so I plan to write some Jest tests that will test different scenarios.

Learning

Having only implemented custom local authenticate measures in my projects thus far, progressing with this issue presents an opportunity to explore different variations one can use for user authentication and will broaden my experience with OAuth 2.0.

Contributing to Lumix Pt. 2

mismathh — Tue, 28 Nov 2023 04:53:26 +0000

Continuing from my previous article, I decided to create two more React components for Lumix. Lumix is a React UI library that provides versatile UI elements that can be added to your web development project.

Issue - Accordion Component

Another issue that I picked up was to create a reusable component that can open single or multiple accordions and display their content. An accordion in regards to UI web design, is a vertically stacked list of headers that can be triggered to reveal/hide content associated with it.

Working on Accordion Component

The concept of showing/hiding a div for the header content was fairly simple in implementing, as my initial plan was to use a useState variable to act as a toggle for the Accordion component, but it got a little tricky dealing with multiple accordions. When there's multiple accordions, my initial implementation either opened or closed up all of the accordions, which was not the goal here as I needed to provide the functionality to open an accordion without affecting the others.

My fix to this was to create a useState variable to hold all of the index values of the opened accordions and to have a function like handleClick() to add or remove an accordion index from the useState variable array each time an accordion header is clicked on.

const [openIndexes, setOpenIndexes] = useState([]);

  const handleClick = (index) => {
    if (openIndexes.includes(index)) {
      setOpenIndexes(openIndexes.filter((i) => i !== index));
    } else {
      setOpenIndexes([...openIndexes, index]);
    }
  };

  return (
    <div
      className="wrapper"
      style={{
        display: "flex",
        justifyContent: `${verticalAlignment}`,
      }}
    >
      <div className="accordion">
        {items.map((item, index) => (
          <div
            className="section"
            key={index}
            style={{
              marginBottom: "5px",
            }}
          >
            <div
              className="title"
              onClick={() => handleClick(index)}
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "center",
                padding: "10px 20px",
                backgroundColor: `${titleColor}`,
                fontSize: `${titleSize}px`,
                width: `${width}px`,
                border: openIndexes.includes(index) ? "1px solid black" : "",
              }}
            >
              {item.title}
              <span>{openIndexes.includes(index) ? "-" : "+"}</span>
            </div>

This is how the Accordion component looks like with default prop values:

My PR for this issue can be found here.

Issue - Tabs Component

Another issue that I worked on was to create a reusable component that is able to render multiple tabs and to display content of an active tab.

Working on Tabs Component

Working on this issue was a bit easier than the Accordion issue, as my initial implementation for that can work here (have a useState variable act like a toggle to only display a certain tab). Additionally, to better signify that a tab is interactive and can be clicked on, I used the cursor: 'pointer' style property to display a pointer cursor whenever the user points over a tab.

This is how the Tabs component looks like with default prop values:

My PR can be found here.

Learning Outcomes with Lumix

Overall, these issues that I have worked on for the Lumix project enhanced my proficiency in crafting React components with exceptional user interface design. Compared to my contributions in Hacktoberfest23, they weren't necessarily hard to do, but I learned many minor details and concepts that I was able to explore only because I had the freedom to create highly customizable components. Looking forward to contributing to more open-source projects in the future!

Contributing to Lumix Pt.1

mismathh — Tue, 28 Nov 2023 04:27:04 +0000

Throughout Hacktoberfest23, I stumbled upon Lumix, which is a repository dedicated to providing versatile UI elements to enhance web development projects. Although some of the interesting issues were picked up during Hacktoberfest, there were some that I had an interest in working on.

Issue - Date Picker Component

One of the issues I worked on was to design and implement a date picker component that is able to select dates.

Working on Issue

Apart from creating the core component, the goal here was to provide a high degree of customization capabilities for the component so that the user will be able to make their own changes to the component to fit their own project.

To create the core date picker component, I decided to implement an input tag with the type of date. This attribute creates a date input field that the user can select a date either from a drop down calendar or by entering it in the text box.

To allow users to retrieve the date and possibly perform an action based on the value, I added in a prop that can take in a function which will receive the date value if the date has been changed from within the date picker component.

const [date, setDate] = useState("");

  const handleDateChange = (e) => {
    setDate(e.target.value);
    if (onDateChange) {
      onDateChange(e.target.value);
    }
  };

  return (
    <input
      type="date"
      value={date}
      onChange={handleDateChange}
      style={{
        borderWidth: `${borderWidth}px`,
        borderColor: `${borderColor}`,
        height: `${pickerHeight}px`,
        width: `${pickerWidth}px`,
        fontSize: `${fontSize}px`,
        padding: "0 10px",
      }}
    />
  );

Many of the previous contributions to Lumix worked with PropTypes in order to verify the passed prop value is of the correct datatype. It was my first time using it, but essentially PropTypes can be used to check your values during run-time and although it wasn't necessary in the component, I decided to keep it in there to also provide additional information on the component for people that will read it. To use PropTypes we need to first import it:

import { PropTypes } from "prop-types"

PropTypes is an object with a key and value pair where the key is the name of the prop and the value is the type that is defined.

DatePicker.propTypes = {
    onDateChange: PropTypes.func,
    borderWidth: PropTypes.number,
    borderColor: PropTypes.string,
    pickerHeight: PropTypes.number,
    pickerWidth: PropTypes.number,
    fontSize: PropTypes.number
};

Additionally, with the defaultProps property, you are able to set the default values of the props within the component. Although I prefer to provide the default values within the function signature, this is an alternative method with PropTypes.

DatePicker.defaultProps = {
    onDateChange: () => {},
    borderWidth: 2,
    borderColor: "#000000",
    pickerHeight: 50,
    pickerWidth: 160,
    fontSize: 20
};

This is how the Date Picker component will look with it's default prop values.

Although it has not been reviewed yet, my PR can be found here.

Creating a Release for my Project

mismathh — Fri, 24 Nov 2023 17:55:25 +0000

I am proud to announce my release for my TILerator project with npm.

Process for Creating a Release

The npm documentation provided substantial information on how to contribute to the registry. These are the steps I took in order to add my project to the npm registry and also the challenges I faced:

This was my first time creating a release and publishing it to npm, so I needed to first create an account on npm.
Within the terminal I logged into the newly created npm account using npm login.
One common file between all npm packages is the package.json file. npm uses this file to describe your package and manage your dependencies, and if you are planning to publish to the npm registry you must have this package.json file. If you are a just starting out with your project, running npm init and following the instructing will help setup the package.json file for you.
The prerequisites have been completed and my project is now ready to be tagged with version number based on semantic versioning. Prior to this, my project was at v0.9.1 and since it was ready to be released, I used npm version major to update it to v1.0.0.
I then pushed my tags to GitHub using git push --follow-tags
Finally, it was time to publish to the registry with npm publish --access=public. If you have been following along with these steps for your own project and everything has been going well up to this point, then congrats! You have successfully managed to publish your package to the npm registry. Unfortuntely, for me, I had to do a little more fixing to my package. After running the publish command, I was faced with an error. I was initially quite confused by this error, but a quick Google search showed me that one of the reasons for this error was if there is already a package with the same name as mine on npm. To my surprise, a search on the npm website showed a package called "tilerator" that was published 7 years ago! After reading the npm documentation, I found out that I could scope my package to make it unique. You can make your package a scoped package by adding a scope name in between an @ and /, followed by the name of your project, such as: @scopename/packagename. I needed to change the name of my project inside the package.json file with my new scoped name, @mismathh/tilerator and ran npm install to also update the package.lock file. After repeating steps 4-5, running npm publish --access=public worked. My release can be found here.

How to Install

npm install @mismathh/tilerator -g

User Testing

User testing went quite well in regards to the main functionality of the package, but it was brought to my attention that I needed to add more details to my README for the optional features. Using the --config flag was quite difficult to use for them since they didn't know what options to add inside the config file, and also it was noted that I didn't have to use TILerator in every command, and tilerator was fine.

Learning Outcomes

It was a great learning experience to publish my project to the npm registry. Over my programming journey I have used many npm packages for my projects but I never got to experience how those packages are placed into a public registry for developers to use, until now.

Adding Continuous Integration (CI) to my Open Source Project

mismathh — Fri, 17 Nov 2023 23:00:36 +0000

This week I added Continuous Integration to my open source project, TILerator.

GitHub Actions Workflow

I used GitHub Actions to set up my CI, which is a great platform you can use on GitHub to automate your builds, tests, and deployment pipeline. I created a ci.yml file and added a Unit Test job to run my tests with every push or pull request to the main branch.

Adding Tests to Another Project

I also had an opportunity to contribute tests to one of my classmate's project. They also used Jest for their project's testing framework, so it was fairly easy to set up new tests. Since I'm used to JavaScript and their project was built in TypeScript, I needed to brush up on the differences between them to avoid writing poor tests. It was interesting to see that for the tests I wrote for my program, I needed to validate the parameter types, but those kind of tests weren't needed in my classmate's project due to TypeScript being a strongly typed language. After reviewing their files, I found a function that converts Markdown syntax for code blocks into the appropriate HTML tags, and decided to write a few tests for that function. The tests I added can be found in this Pull Request.

Thoughts on CI

Now that I have set up CI for my project, I think that it's a great tool to use in your projects to automate tests and error checks. Making it so it checks any push or pull request to your repo for errors prevents any major or minor errors to slip by unnoticed. It was also quite easy setting it up through GitHub Actions, so I plan on adding CI to my future projects.

Implementing a Testing Framework

mismathh — Sat, 11 Nov 2023 03:04:38 +0000

This week I managed to add a testing framework to my open source project, TILerator. Since it's a JavaScript project, I decided to use Jest as my testing framework.

What is Jest?

Jest is a JavaScript testing framework developed by Facebook, and is widely used for testing JavaScript and React applications. I have been exposed to Jest in other projects and along with having a detailed documentation, it is quite easy to install.

Setting up Jest

Jest is needed only for testing purposes so install it as a dev dependency.

npm install --save-dev jest

Next, add a test script to your package.json file to be able to run tests using Jest.

"scripts": {
    "test": "jest --",
    "test:watch": "jest --watch --"
  }

Finally, create a testing directory to hold all of you tests.

Writing Tests

For my first test, I decided to test out a function that receives a string and checks if a certain regex pattern can be matched, and if it can, it adds an HTML <b></b> tags to the string. I wrote 5 tests to check on the function's behaviour with certain inputs.

describe('markdownToHTML tests', () => {
    test('should return a string with <b> tags if part of string is encompassed between **', () => {
        expect(markdownToHTML('**sentence 1**  sentence 2  **sentence 3**')).toBe('<b>sentence 1</b>  sentence 2  <b>sentence 3</b>');
    });

In order to test out the core functionality of the program, I also wrote 3 tests to confirm if the correct output would be returned. There was one hiccup when writing these tests, as within the core functions, I used process.exit() to exit the program on certain conditions, and if it is called within a Jest test, it will immediately stop the test runner which could lead to incomplete test results.

After reading the documentation to combat this, I found out about mock functions and spyOn(). Using mock functions and mockImplmentation(), we can define the default implementation of a mock function, and the spyOn() function can be used to monitor the behaviour of the function. Combining these functions resulted in being able to monitor process.exit() to check the exit code that was outputted while not actually exiting the process.

 test("should exit with exit code -1 and error message if invalid file path is given", async () => {
    const mockStdErr = jest.spyOn(console, "error").mockImplementation();
    const mockExit = jest.spyOn(process, "exit").mockImplementation();

The testing commit can be found here: fc128e0

Learning Outcomes

Despite working with Jest before in other JavaScript projects, there was still a lot that I learned on the capabilities of Jest. Additionally, from writing all those tests, I improved my understanding of TILerator. Testing should be a fundamental process that is used within your project to not only identify bugs, but to also create reliable software. If you have a JavaScript project that needs a testing framework, try out Jest!

Recap of my First Hacktoberfest

mismathh — Wed, 01 Nov 2023 03:49:32 +0000

October 31st. That means it's Halloween 🎃, but it also marks the end of Hacktoberfest23. I had the privilege of taking part in Hacktoberfest 2023 this year and it was an intimidating, yet rewarding experience, learning about how to contribute to open-source projects and improving my knowledge as a developer. I will be recapping my progress for my first Hacktoberfest!

PRs

#1 - Python Hunt

Issue, PR, Blog Post

For my first issue, I worked on creating a webpage in a Django project that describes key Python variables, for Python beginners. The webpage primarily was built with JavaScript, but Python was used elsewhere and I needed to understand how to set up the route for my created webpage. Despite it being my first time working with Python and Django, the Django documentation was well written and I was able to learn what I needed to in order to implement this feature.

#2 - Starwar Archive

Issue, PR, Blog Post

For my second issue, I dived into React and worked on creating a page that displayed detailed information of a Star Wars character. This was probably my most challenging issue that I worked on this Hacktoberfest, as I needed to learn how to use useQuery and useQueries and majority of my time went into this. Additionally, adding in the necessary CSS tags to make an ideal page layout took a lot of trial and error. It was a great issue to work on and I definitely gained some experience with React apps.

#3 - Software Engineering Unlocked Podcast

Issue, PR, Blog Post

For my third issue, I worked on improving a transcript for a podcast episode. This issue was the one that shocked me the most as I went into this issue thinking it wouldn't take much time, but I had to rewind the recording multiple times for each section to make sure everything matched between the recording and transcript. Although this wasn't a code related issue, I learned a lot by having to research the terms used and just by listening to the recording, as the episode was quite informational.

#4 - Back to Starwar Archive

Issue, PR, Blog Post

For my fourth and final Hacktoberfest issue, I went back to a project that I worked on earlier in the month (#2). This time I worked on a issue to create a page for each starship that can be pulled from SWAPI. What was interesting to see while working on this issue was that I needed to improve the changes I made from PR #2 in order to add my changes to this issue.

Final Thoughts

Contributing to open-source projects was quite daunting for me initially, but participating in Hacktoberfest 2023 was an amazing experience and it really helped boost my confidence as a developer. If you had told me a few months before today, that I would be able to successfully complete four pull requests for multiple open-source projects, I would've said you were crazy, but here I am 🤩! My only regret was that I was unable to sequentially find issues that gradually increased in difficulty, but this only pushes me further to continue to find issues that will help me improve my developer skills.

Although my Hacktoberfest23 journey comes to an end, I hope that my open-source journey continues for a long time. Looking forward to Hacktoberfest24 and seeing you on my next blog post!

4th Pull Request in Hacktoberfest23

mismathh — Wed, 01 Nov 2023 02:00:09 +0000

For my 4th pull request for Hacktoberfest23, I decided to head back to a previous project that I had worked on during this month, Starwar Archive. This project is a React application that pulls character information from SWAPI and displays key information for each character as a list.

The Issue

I found an open issue that I was interested in working on which was to add starships details, but the description was missing. I requested for more information from the owner under the issue. My previous issue that I worked on in this project was to create a description page that would be able to list out detailed information about a character. Like my previous issue, I proposed to create a new page to describe each starship. I did not receive a reply and I was a bit hesitant to start without a reply, but I decided to make my proposed changes and submit a PR and ask the owner if the changes were adequate.

Process

Since I have already forked the repository for an earlier issue, I just needed to create a new branch for this new issue that I planned to work on.

Implementing Changes

Since the only place that displays the name of a starship is within the person description page, I decided to attach a link to the starship name to redirect users to the starship description page. The starship name will be highlighted once the user hovers over the starship name to signify that it's a link.

What was also interesting to see was that in order to implement my changes for this issue, I needed to improve my changes I made to the API fetch method from my previous issue. If the information of a person can be found from within a separate endpoint of SWAPI, it would just provide the URL instead of the information.

And so in my earlier implementation, I decided to just send the URL to the fetch call to receive the data.

For the Starship page, I needed the id of the starship which is found at the end of the URL, and so I decided to edit the fetch call so that it also just requires the id to make everything consistent.

The final result looks like this:

After sending a friendly reminder to the owner, my PR was approved and my contributions were merged.

Learning Outcomes

Overall, I enjoyed working on this issue and further improving a project that I had previously worked on. It was interesting to see that my initial implementation of certain features needed to be improved on in order to implement a new feature. It reminds me that the structure you build your code in may be ideal for the current situation at hand, but it may not be so for future features, and creating a code structure that makes it easy for future features to be implemented will improve the efficiency and maintainability of your project.

3rd Pull Request in Hacktoberfest23

mismathh — Tue, 31 Oct 2023 21:33:15 +0000

For my next project to contribute to for Hacktoberfest23, I decided to work on Software Engineering Unlocked, which is a repository that holds transcripts for the Software Engineering Unlocked Podcast to make it more accessible. The podcast provides a sneak peek into how software companies around the world develop software and developers from small startups to large companies come to talk about their useful experiences.

The Issue

There wasn't an issue that was open at the time I found the repo, but I noticed that within the README, it said that if we could find a transcript that needed to be improved, we could create an issue for it. After skimming through a few transcripts, I found that Episode #58 featuring Cat Hicks needed to be improved on, and so I created an issue for it.

Process

There was no setup needed to work on this issue, as it just required me to make my changes within the markdown transcript file. There were a few general formatting questions I had, but I noticed that there were many other issues that were created prior to mine which were also about "improving an episode" and I was able to find the answers based on the questions they had asked the owner of the repo. Also, after reading the Transcription_Guidelines.md file, I had a good sense of the changes I needed to make, and forked the repo and created a new branch to work on.

Implementing Changes

I initially went into this issue thinking that it wouldn't take much time to find errors and fix the transcript, but I was quite wrong. While I was editing the transcript, there were numerous times where I had to rewind the podcast recording to make sure I was hearing the words right and making the appropriate changes. There were also times where the auto-generated transcript had incorrectly spelled tech terms and I needed to do external research on the guest speaker to accurately understand the terms used.

The list of changes that I made to the transcript were:

Spelling and punctuation fixes
Addition of missing dialogue
Addition of relevant non-text audio in parentheses
Syncing timestamps
Maintaining <= 80 character limit per line
Removal of duplicated filler words

After sending the owner a friendly reminder, the PR that I submitted was approved and successfully merged.

Learning Outcomes

Prior to my open-source journey, I thought I needed to work on code-specific issues to actually provide valuable contributions to a project, but I'm glad I got to contribute to Software Engineering Unlocked. Listening to the podcast recording was quite valuable to myself as I got to learn some new tech terms and got to hear about the experiences of a senior developer. This was a lesson for me that open-source contributions can come in many forms and issues such as just improving a markdown file is just as important to a project's success. Looking forward to the next project to contribute to!

2nd Pull Request in Hacktoberfest23

mismathh — Thu, 26 Oct 2023 23:42:35 +0000

For my next project to contribute to for Hacktoberfest23, I decided to work on a React project to gain more experience and exposure to the different techniques used in React. I stumbled upon the Starwar Archive project, which is a React application that pulls data from an open Star Wars API called SWAPI to display information of each character.

The Issue

The issue I planned to work on was to create a person description page. This page needed to show detailed information of a character once their character card was clicked on the homepage.

Process

To get started, I forked the repository, created a new branch and got to work. There wasn't much to setup beforehand as I just needed to install the package modules with npm install.

Implementing Changes

The first thing I needed to decide on was the layout and overall color scheme of the page. As, the only page available was the home page, I decided to stay as close as possible to it and so I took some of the icons and the color scheme of the home page.

The next issue that I had to deal with was retrieving the data from SWAPI. Initially, useQuery was used to fetch data from SWAPI. It was my first time dealing with useQuery and so I needed to do some research on how to use it. I found that useQuery is a cool custom hook within React Query that is used to fetch data in a React application. Under the hood, useQuery manages things such as caching data after the initial fetch and re-fetching data in the background. A useQuery hook requires two arguments. The first one is a key for the query, and the second one is a function to fetch the data.

Additionally, what I found interesting with SWAPI, is that if some of the information of person can be found from within a different endpoint of the API, it would instead just provide the URL to it and not the actual information. An example response for a person would be like:

And so, one of the issues that came up was how to use useQuery for an array of URLs? After looking at the useQuery documentation again, I found another hook called useQueries which can be used to fetch from multiple URLs. There was a lot of trial and error with the structure of useQueries as it's slightly different from useQuery, but I was able to successfully fetch multiple queries from SWAPI for the data I needed. The final page looks like this:

After submitting my PR with my changes, the owner quickly approved and merged my contributions.

Learning Outcomes

Overall, it was great working on a React project and learning about some new hooks that I will definitely implement in my future projects. Looking forward to the next project to contribute to!

First Pull Request in Hacktoberfest23

mismathh — Mon, 09 Oct 2023 16:18:29 +0000

As I dive into the 2nd month of my open-source journey, it just so happens to also be the month of Hacktoberfest! This is my first time participating in Hacktoberfest and I wanted to share the process of my first Hacktoberfest PR.

Looking for Issues

For my first contribution, I wanted to work on a small issue to start off, and gradually work my way up to more challenging issues. It was initially quite overwhelming to see all the different types of issues that were available, but using labels such as label:hacktoberfest, label:"good first issue", and sorting by Least Commented helped greatly.

Through my search, I stumbled upon the Python_Hunt repository, which is a web-based project that revolves around providing summarized notes on key topics on the Python programming language to help make learning Python easier for newcomers. The project currently uses Django, which is an open-source Python-based web framework that allows you to quickly develop secure and maintainable websites.

The Issue

The issue I decided to request to work on was to create a webpage for "Tuples in Python".

Process

After getting approval, I forked the issue, created a new branch and prepared to setup my local system.

Setup

There was not much that I needed to setup, but since this was my first time working with this web framework, I needed to install Python and Django. After that, I needed to run a python manage.py migrate command to create database tables and a python manage.py runserver to start the server.

Implementing Changes

Essentially, this issue required me to create a .html page that described what a Tuple is in Python, and to provide some examples. I also needed to add in the correct routes so that users will be able to navigate to the newly created page. This was my first time using Django, so I needed to do a little bit of research to understand how routes worked on Django. To summarize, Django uses a function called path() which accepts two parameters: a URL (the URL for the webpage) and a View function (will hold the logic to render the page). Once the URL entered in the browser matches a URL described within path() it will then invoke the View function to render the page.

Learning Outcomes

Overall, submitting this PR was a great learning experience for me as I got to interact with the community and contribute to another open-source project. It was also interesting to work on a project that involved Django. Looking forward to contributing to other projects during Hacktoberfest!