DEV Community: Kien Nguyen Chi

OSD600 Final Project Blog 3

Kien Nguyen Chi — Wed, 08 Dec 2021 01:33:58 +0000

Introduction

🔥This is a mini-series including 3 blogs that shows the process how I work on my final project in my Open-Source Development class (OSD600) at Seneca College.

📝In the first blog, I introduced how I found an open-source repo to work for Final Project. In the second blog, I introduced my process of installation and setup the app. In this last blog, I will introduce my process to implement the feature and how the result looks like.

Process

First Impression

It was a wow when I first looked at the code of the repo. It contains so many folders and functionalities. Some folders had the views of the features and code of functionalities. Some folders contained classes and database connection.

I did not know where to start. So, I picked Category folder to read the code first because my feature implemented is about Pin Category.

Difficulties

I decided to add an attribute to Category class named pinned. I planned to mark it as a boolean. I would set it to be true whenever user pins, and set it to be false for default value. And I would display all the pinned categories on top.

public struct AWSCategory: Model {
  public let id: String
  public var name: String
  public var imageName: String?
  public var tweets: List<AWSTweet>?
  public var pinned: Bool?

  public init(id: String = UUID().uuidString,
      name: String,
      imageName: String? = nil,
      tweets: List<AWSTweet>? = []
      pinned: Bool) {
      self.id = id
      self.name = name
      self.imageName = imageName
      self.tweets = tweets
      self.pinned = pinned
  }
}

That was be the best shortcut for me to implement pin feature. But it would change the structure of the whole database system. So I needed to figure out other way.

Implementation

I created a button Pin to top whenever users press-hold on any category.

Button {
     viewModel.pinCategory(category: category)
} label: {
     Text("Pin to top")
}

The button would show the text Pin to top. And when users hold-press it. It would call pinCategory() accepting parameter of current row category to do the functionality.

In pinCategory() function, firstly, I made a loop to found the index of the category in the array.

func pinCategory(category: AWSCategory){
   var categoryIndex = -1;
   for (index, each) in categories.enumerated() {
        if(each.id == category.id){
           categoryIndex = index
        }
   }
   ...
}

If the index found is valid, I would remove the current category from the array, insert it to the front. So, when the page is reloaded, it would appear on the top of the list.

if(categoryIndex != -1){
    categories.remove(at: categoryIndex)
    categories.insert(category, at: 0)
    ...
}

categories is the array of the imported categories from the database. So, I needed to update the categories to the database when I had done my feature. I had a chance to understand how to implement AWI Amplify Datastore. I read the articles and followed the implementation in /Managers/DataStoreManager.swift to see how actually this database system works.

for category in categories {
   DataStoreManger.shared.deleteCategory(category: category)
}
for category in categories {
   DataStoreManger.shared.createCategory(category: category)
}

Result

This is 3 folders that I created:

When I hold-press on Folder 2, it will show:

And here is the final result:

When I close the app and reopen it, the categories are saved as before. I ensured the persistence of database. Folder 2 is still on top.

Conclusion

💻This has been the first open-source project that I spent so much time in it. From the process to find interesting project to work on, to the installation process and finally implementation process.

💪I'm happy to see my overall process and I'm looking forward to push myself in the open-source world.

Sources

📚Read my mini-series at:

💻Take a look at my work:

OSD600 Final Project Blog 2

Kien Nguyen Chi — Wed, 08 Dec 2021 00:14:45 +0000

Introduction

🔥This is a mini-series including 3 blogs that shows the process how I work on my final project in my Open-Source Development class (OSD600) at Seneca College.

📝In the first blog, I introduced how I found an open-source repo to work for Final Project. In this second blog, I will introduce my process of installation and setup the app.

Process

Step 1: Twitter API

I had to register for Twitter API because the app requires API from Twitter.
I had to fill out the registration form from Twitter and waited 1 day to be approved for the access granted.
I got the API Key in order to implement into Secrets.swift file in the project later.

import Foundation

// swiftlint:disable line_length

enum Secrets{
    static let bearerToken = "myAPIKey"
}

Step 2: AWS Amplify DataStore

I had to install AWS Amplify DataStore in case I needed to change the model of the app.
I opened the terminal and type:

curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

The amplify package is already added to the repo when I folked it my computer.

Step 3: Setup Repo

I folked the repo to my GitHub.
I cloned it to my computer.

git clone git@github.com:kiennguyenchi/brain-marks.git

I set the remote upstream to the maintainer's repo.

git remote add upstream https://github.com/mikaelacaron/brain-marks.git

I checked out new branch with formatted name by Contributing.md rule.

git checkout -b 101-feature-pin-category

Finally, I could run the app on XCode and opened iPhone 11 Simulator:
This is the main screen of categories of the app:
This is the screen when I hold my finger on each category.
My target is to show the option pin under edit.

Conclusion

💻During the installation process, it took me a while to get the API, install the necessary packages and run the app properly.

❗At first, I could not run the app. I researched and watched youtube videos to see if I installed correctly or not. Finally, I found out that I could not run the app because all the added packages (Amplify, SQLite, Starscream,..) were not finished loading yet. I had to leave them some time to finish loading, then I could run the app.

💪Stay tuned and look forward to my last blog about my implementation process and final result.

Sources

📚Read my mini-series at:

💻Take a look at my work:

OSD600 Final Project Blog 1

Kien Nguyen Chi — Wed, 08 Dec 2021 00:13:56 +0000

Introduction

🔥This is a mini-series including 3 blogs that shows the process how I work on my final project in my Open-Source Development class (OSD600) at Seneca College.

📝In the first blog, I will introduce how I prepare for this project. The final project requires me to add a feature or fix a series of bugs in a huge open-source project. I choose to add a new feature to any project that interests me.

Process

I could say it took me a whole day to search for a project that fits to me. I needed to find the one that more difficult than my level right now so I could level up myself. And also it is not too hard so I could have time to do research and code it.

First thing in my mind, I ran into an existing project of my school that I had a chance to make a pull request before. The project is about a website of course notes of Introduction to C Programming. I thought that it was interesting that I can implement a useful thing for future students in my school. I filed an issue to say that the website only has the course contents right now, I wanted to implement more pages that contains assignments, workshops and course outline. Unfortunately, the owner told me that these contents like that would be provided to students in other way (Blackboard), not on public website anymore.

So, I scrolled down the Explore tab on GitHub to find interesting project. I checked for languages that I'm familiar before, which is C++. But no projects fit to me. Suddenly, a thought jumped in my head What if I try Swift? It may be a good idea. I took an IOS App Development course this semester, I just did some simple assignments but working on an open-source IOS app and implement new feature? Maybe it's worth for me to try.

Eventually, after looking at some Swift programs. I found Brain Marks app. How interesting it is, it is available on App Store to be downloaded on my iPhone. For the format, it is a bit similar to the Notes on iPhone. For the usage, the app organizes user's saved tweets into categories.

After downloading the app on my phone and explore how it works, I decided to add a feature to the app. I would create a Pin Feature, which means there will be a list of categories in the app, whenever I hold-press the category and choose pin, it will show up on the top of the list.

I filed an issue to tell the repo's owner about my idea. She thought that it was unnecessary to implement right now but she still gave me a shot to try.

Conclusion

😍I'm so excited to work on a big open-source IOS app first time in my life. I don't know if I can fully develop this functionality or not but I would try my best.

💪Stay tuned and look forward to my next blog about my implementation process.

Sources

📚Read my mini-series at:

💻Take a look at my work:

First time using Conan to release software

Kien Nguyen Chi — Thu, 25 Nov 2021 23:30:51 +0000

Introduction

This week, I worked on my Static-Site Generator - Potato Generator to add package registry. My SSG is in C++ language. I chose Conan, GitLab, to publish my package officially.

Installation Process

Firstly, I have to ensure that I have CMake and Conan installed on my machine.
Secondly, I have to make sure that I create GitLab account, link it to my GitHub's project, create personal access token to access later.

Set-up Process

I build a package with name and version.

conan new potato-generator/1.0.0 -t

I build package with user and channel.

conan create . potato-generator/beta

I add remote to my project (get project_id from GitLab)

conan remote add gitlab https://gitlab.com/api/v4/projects/<project_id>/packages/conan

I add remote for my instance.

conan remote add gitlab https://gitlab.com/api/v4/packages/conan

I need to authenticate with my GitLab account. I use username and personal access token from installation step.

conan user <gitlab_username or deploy_token_username> -r gitlab -p <personal_access_token or deploy_token>

I publish the package.

conan upload potato-generator/1.0.0@potato-generator/beta --all

Finally, I create a git tag for my first version 1.0.0.

git tag -a v1.0.0 -m "Version 1.0.0"

Install my package instructions

To install my package from Conan, please carefully follow this instructions:

Install Conan and CMake
Install package by Conan command

conan install potato-generator --remote=gitlab

Add remote

conan remote add gitlab https://gitlab.com/api/v4/projects/31616511/packages/conan

Otherwise, please take a look at my Release

Set Up GitHub Action, add test to partner's repo

Kien Nguyen Chi — Wed, 17 Nov 2021 19:53:49 +0000

GitHub Action

This week, I set up GitHub Action for my Static Site Generator (SSG). There are several options with C++ language and I picked C/C++ with Make to implement.
It auto generates a yml file with default contents. I had to change a few things. The structure of yml looks like this:

name: C/C++ CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: compile
      run: g++ pgprogram.cpp HTMLFile.h HTMLFile.cpp MainPage.h MainPage.cpp -o pgprogram --std=c++17
    - name: Program Test
      run: g++ test/test.cpp test/catch.hpp HTMLFile.h HTMLFile.cpp -o programtest --std=c++17

First, I set push and pull_request to run the test whenever it is pushed or pulled to the main branch:

  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

Second, I set the run command of compile option to the command to compile my program:

g++ pgprogram.cpp HTMLFile.h HTMLFile.cpp MainPage.h MainPage.cpp -o pgprogram --std=c++17

Third, I added option to test my program with testing command:

g++ test/test.cpp test/catch.hpp HTMLFile.h HTMLFile.cpp -o programtest --std=c++17

Finally, the GitHub Action Workflow runs successfully on the project:
Take a look at how it runs: GitHub Actions Run

Add Test to partner Repo

I picked Gus's SSG to work on. I had work on his project before because we use the same C++ language. We use same testing framework, which is Catch2. So I generally understand how his SSG and Testing Tool work.
I tested his project with his existing 10 test cases and it showed:
I'm kind of ignoring failed tests for now and add my tests.
On his existing test cases, I saw he had 4 functions to check for correct file/folder input. He only had the test cases to test if these functions are returning true values.

TEST_CASE("isText() Testing", "[istext]") {
    REQUIRE(isText("The Adventure of the Speckled Band.txt") == true);
}
TEST_CASE("isMarkDown() Testing", "[ismarkdown]") {
    REQUIRE(isMarkDown("readme.md") == true);
}
TEST_CASE("isFolder() Testing", "[isfolder]") {
    REQUIRE(isFolder("./dist") == true);
}

TEST_CASE("isJson() Testing", "[isjson]") {
    REQUIRE(isJson("ssg-config.json") == true);
}

I added test cases to test if these functions are returning false values correctly.

TEST_CASE("isText() Testing (not .txt file)", "[istext]") {
    REQUIRE(isText("The Adventure of the Speckled Band.md") == false);
    REQUIRE(isText("The Adventure of the Speckled Band") == false);
}

TEST_CASE("isMarkDown() Testing (not .md file)", "[ismarkdown]") {
    REQUIRE(isMarkDown("The Adventure of the Speckled Band.txt") == false);
    REQUIRE(isMarkDown("The Adventure of the Speckled Band") == false);
}

TEST_CASE("isFolder() Testing (not folder)", "[isfolder]") {
    REQUIRE(isFolder("The Adventure of the Speckled Band.txt") == false);
    REQUIRE(isFolder("The Adventure of the Speckled Band.json") == false);
}

TEST_CASE("isJson() Testing (not .json file)", "[isjson]") {
    REQUIRE(isJson("The Adventure of the Speckled Band.txt") == false);
    REQUIRE(isJson("The Adventure of the Speckled Band") == false);
}

After adding 4 tests, all tests worked perfectly.
Take a look at my Pull Request.

Conclusion

Overall, it is really useful to add GitHub Action Workflow to my project. The future pull requests, commits, etc will needed to be checked through my compiling command and my test. It is absolutely a safeguard for the project.
Furthermore, it is interesting this week that I can contribute adding tests to my partner's repo. Hopefully, my test cases will be useful for your project.

Code Reviews on IPC Project

Kien Nguyen Chi — Tue, 16 Nov 2021 22:38:28 +0000

Introduction

This week, I have done 2 code reviews on classmates' pull requests on the project operated by my school Seneca College. It is an open source project - built in contents of IPC144 (Introduction To C Programming) course. You can take a look at the GitHub Repo and the website.

First Code Review

First, I take a look at this Pull Request #76. This commit audits and fixes the arrays.md file.
I take a look carefully at every changes of the pull requests and I found 2 issues that needed to be fixed.
First, there is a hyperlink on the line 19 displayed in the web on:

[structures](../C-Data-Structures/structures "Structures")

When I try to click the link, it leads to an error link so I put a comment for the maintainer to fix that link.
The second issue is on line 118, there are code displayed as below:

for (i = 0; i < NGRADES; i++) {
    printf("%d" , grade[i]);
}

I leave a comment that the maintainer can add int i = 0 so it would make more senses for the code.

Second Code Review

I take a look at this Pull Request #83. This commit audits and fixes the Operators.md file.
I take a closer look at changes of this pull request and I found 2 issues that needed to be fixed for better display.
The page is currently displayed like this:
Section 5 and 6 should be in code block syntax which makes the it looks similarly to the Code Block of Section 1-4.
I left a comment for the maintainer to fix and he successfully put them into the code blocks.
The page is now displayed like this:

Conclusion

This is the first time that I reviewed someone code and it is interesting to do that. The more I dig in to the open source world, I cannot deny the fact that GitHub is really useful tool for the coders to work together, add code, review code, etc. It is so convenient and I love it!

Improve Usability to new IPC144 Website

Kien Nguyen Chi — Tue, 16 Nov 2021 20:25:35 +0000

Introduction

This week, I contributed to one of projects operated by my school Seneca College. It is an open source project - built in contents of IPC144 (Introduction To C Programming) course. You can take a look at the GitHub Repo and the website.

At first impression, the new website is more good-looking and user-friendly than the old website. Taking a closer look at the new website. I found out that I can add an additional feature to maintain the usability of the users (students).

Issue

The page footer is kind of blank right now with a link to Table of Contents only.
I want to add the hyperlink of Weekly Schedule to the page footer, so that when students scroll down to the end of the page. They can click on either Table of Contents or Weekly Schedule, which both pages contain important information.
I want to remove the hyperlink of Weekly Schedule in Contents page because we would have the hyperlinks of Weekly Schedule in both left navigation bar and footer.
Take a look at my filing issue.

Process

In order to add additional hyperlink to the footer, I add Weekly Schedule label and its location to in docusaurus.config.js file.

{
   label: 'Weekly Schedule',
   to: '/weeklyContents',
},

Here is the result:
In order to remove the hyperlink from Table of Contents page. I removed the line in docs/intro.md:

[Weekly Schedule](weeklyContents.md)

Here is the result:
Take a look at my Pull Request

Conclusion

Overall, my pull request is easy to solve. But it is so amazing to me to be a part of my college's project, that I can actually find an improvement to work on something for future students and people see it as a convenient way for students to use the website. After all, I'm so happy that my Pull Request is merged successfully to the college project.

Catch2 - Testing Framework

Kien Nguyen Chi — Fri, 12 Nov 2021 02:51:28 +0000

Introduction

This week, I work on my Static Site Generator (SSG) - Potato Generator. I implemented the Catch2 - Testing Framework to my project.

There are many testing tools for C++, I could say MSTest, Google Test, built-in test in Visual Studio,... It may take you times to set up the tools. In contrast, I pick a Catch2 framework for testing because it is easy to set up and easy to use.

Process

I downloaded catch.hpp file from Catch2 Repo.
I created a folder test to maintain catch.hpp and other testing files.
I added testing file with the format test#.cpp file (# represents for number accordingly)
After completing the test, I executed the command g++ ./test/test#.cpp -o test# --std=c++17 in the CMD and then opened the Output window to see the success or failure of the test.

Testing file structure

First of all, every testing file has the following structure. I defined CONFIG_CATCH_MAIN, include catch.hpp file at the beginning of each test file and created each test case with the following format.

#define CONFIG_CATCH_MAIN
#include "catch.hpp"

TEST_CASE("This is the name of the test case")
{
    //code
}

In the TEST_CASE, I would use REQUIRE function to ensure the outputs of my testing functions are correctly returned.
If you want to test any functions in any specific file, you need to include it in the testing file. In my first test case test1.cpp, I included pgprogram.cpp file to test some functions to validate the command line arguments.
I checked if there is no arguments provided. Does the function output the correct messages?

TEST_CASE("No Arguments provided")
{
    char* list[1] = {"./pgprogram"};
    REQUIRE(checkArguments(1, list) == "Failed arguments provided");
}

I checked if true argument is provided. Does the function output correct messages? There are tons of tests relating to arguments version, help, input, output, language,... But I gave 1 example here.

TEST_CASE("Arguments Check")
{
    char* list[2] = {"./pgprogram", "-v"};
    REQUIRE(checkArguments(2, list) == "Potato Generator - Version 0.1");
}

In test2.cpp, I included "HTMLFile.h" and I implemented some tests to check for the HTML File implementations.
Firstly, I checked if the program prints nothing if no files are provided.

TEST_CASE("Check empty files")
{
    HTMLFile file;
    REQUIRE(file.getTitle() == "");
    REQUIRE(file.getURL() != "");
}

Secondly, I checked if correct file is input and its URL and title are implemented correctly.

TEST_CASE("Check existing files")
{
    HTMLFile file;
    file.openFile("../Sherlock-Holmes-Selected-Stories/Silver Blaze.txt", "fr");
    REQUIRE(file.getTitle() == "Silver Blaze");
    REQUIRE(file.getURL() != "Silver Blaze.html");
}

Lastly, of course, I need to check if incorrect file is input, does the program process anything? In this case, nothing is implemented.

TEST_CASE("Check non-existing files")
{
    HTMLFile file;
    file.openFile("../Sherlock-Holmes-Selected-Stories/notafile.txt", "fr");
    REQUIRE(file.getTitle() == "");
    REQUIRE(file.getURL() != "");
}

Conclusion

You can take a closer look at all the testing files that I created so far and folder structure in the commit.

Overall, the testing tool is really helpful to test our code and it is worth to implement. But also it is overwhelming to brainstorm all the possibilities that could happen to put into the test.

C++ Static Analysis Tool

Kien Nguyen Chi — Thu, 04 Nov 2021 20:28:36 +0000

Introduction

This week, I work on my Static Site Generator (SSG) - Potato Generator. I plan to implement a source code formatter for my project, which is clang-format and a linter, which is clang-tidy.

Implement the clang-format

Using CMD, I install clang-format by npm.

npm install clang-format

Then I create .clang-format file by the command:

clang-format.exe -style=llvm -dump-config > .clang-format

I download Clang Format Editor to test custom format. We can use this app to modify our format for the code. In this case, I use the default format. The app will show the options with switches to modify format (which is convenient), differences between current source code and formatted source code:
I run the editor on the all .cpp files and .h files in my project with style WebKit to format my code.

clang-format -i -style=WebKit *.cpp *.h

If you are using Visual Studio Code, you can:
- Install clang-format extension
- Use Shift+Alt+F to format your current file

Implement clang-tidy

I install linter clang-tidy
After installation, I run the tool by this command on cmd

clang-tidy --checks='modernize*, readability*' filename.cpp -- -std=c++17

It will show a list of warnings and errors in my code.
In my situation, it shows that I should replace the return type of string to auto, which I do not prefer to do, so I keep that warnings.

warning: use a trailing return type for this function [modernize-use-trailing-return-type]
    string getURL();
    ~~~~~~ ^
    auto            -> string

If you are using Visual Studio Code, you can:
- Install clang-tidy extension
- It will automatically read through your file and show errors/warnings

Conclusion

You can take a look at by implementation and instructions to build Static Analysis Tool for C++ program with clang-format and clang-tidy in my commit.

Overall, these tools are extremely helpful to restructure the code in nice format and eliminate all the warnings and errors from the code. It is a useful tool for developers to contribute on other project in open-source world.

Hacktoberfest - Working with Swift

Kien Nguyen Chi — Thu, 28 Oct 2021 18:04:09 +0000

Project Introduction

👉 Since starting of this semester, I took an IOS app development class. I was impressed by how XCode is convenient for the user to build the app interface, it is like dragging and dropping things in Adobe Photoshop.

👉During the Hacktoberfest month, I wanted to work on an open source app in Swift language to explore how the IOS app truly works in the real world.

👉The project is about Bookmark containing saved important links with categories for user to read them later. You can take a look at its GitHub Repo or my Folked Repo.

Project Issue

❓I took an issue to add favorite feature to the app. With the following links display, whenever an user clicks on the bookmark button besides it. It would pin to the top of the list

👉I spent hours to read through the project for to find where to put my code in, run the Simulator to see how the app works.

👉I took me a lot of time to complete this project since I don't have a Mac yet, it is inconvenient to work with IOS app because XCode serves Mac user only. I had to borrow a Mac from my friend, installed the Xcode 12GB with my slow Internet connection, wrote the code, ran it, returned to her and borrowed back one day.

🔗This is my filing Issue on GitHub.

Project Process

I knew that what I have exactly to do. First step, I needed to get the data from the view, the table cell data and its index.

var linkView = sender.superview
while let view = linkView, !(view is UITableViewCell) {
     linkView = view.superview
}
guard let tableCell = linkView as? UITableViewCell else {return}
guard let indexPath = tableView.indexPath(for: tableCell) else {return}

Next, I needed to remove the link from the current index, which was currently showing on the screen.

let link = self.links[indexPath.row]
self.links.remove(at: indexPath.row)

Next, I needed to insert it at index 0, because after I added it to the bookmark, it would stay on top of the list.

self.links.insert(link, at: 0)

In final step, I needed to save my modification and reloaded the interface.

self.saveLink()
self.tableView.reloadData()

🔗This is my Pull Request on GitHub.

Conclusion

👉The owner of this repo is so slow in replying, which sometimes inconvenient to me to interact. It may take up to a week for a reply.

👉Overall, it is fantastic to work on an actual open source IOS app in the real world. I can see some very similar code structures and designing tools that I learnt in class. Wanna keep falling in love with Swift and Xcode, I really need to save money to get a Mac.

✔️During the Hacktoberfest, I worked with total 4 different programming languages/framework, which would make me so excited about open source programming. I had try Rust, Vue, React and Swift, very unfamiliar to me a month ago, but familiar now.

Implement a Docusaurus Feature

Kien Nguyen Chi — Thu, 28 Oct 2021 17:32:27 +0000

Introduction

This week, I'm working on my Static Site Generator (SSG) - Potato Generator to add a new feature for it.

I was introduced a new tool, which is Docusaurus. It has several useful functionalities that can be used to implement a website such as supporting React components, Themes, Plugins, Markdown support,... It took me a while to download the Docusaurus app, tried to publish it on my own and explored the features. It was interesting, you can take a look at my Docusaurus Demo Website.

I picked Syntax Hightlighting for code block to implement into my SSG. For many programmers, it is needed to have this function in your SSG because every programmer would have the code block in any of their documents.

Process

I broke down the tasks into 2 issues to solve: Identify code block and style for code block.

In order to identify the code block, I wrote code to notice the appearance of code block when I write the output to HTML file. Whenever there is an open syntax of code block, I would put the code following until finding close syntax of code block into a div container.

This is the result after identifying the code block and write them to HTML.

After that, I changed the style for the div container to have black background, white text with normal fonts. It would look more similar like a code block.

Here is the result after modifying the style.

Whenever there is a code block input into my program, it would be exported to HTML in the following format:

<div style='background-color: black; color: white;'>

<p style='font-family:Consolas;'> int main(){</p>
<p style='font-family:Consolas;'> cout << "Hello World";</p>
<p style='font-family:Consolas;'> }</p> 

</div>

Conclusion

Overall, I felt interesting to implement such an useful feature like this. I would like to improve my SSG with more useful functionalities like this in the future.

Looking at my commit of new code block feature on SSG.

Hacktoberfest - Working with React

Kien Nguyen Chi — Tue, 26 Oct 2021 03:28:39 +0000

Project Introduction

👉During the Hacktoberfest month, I worked a project using React Framework. It has been a long time since I coded React framework, because my concentration is not on web development too much. It is interesting to recall the knowledge from Web class in college.

👉The project is a website about React component library based on styled components. You can take a look at its GitHub Repo or my Folked Repo.

Project Issue

❓I took an issue on this project: which is I need to create a new component named TextArea with new web page, take the component information and put it on the website.

👉It has been a while since I worked with React App so it took me a bit time of reading at first to remind me of how React components work. Also, the project has a very clear structure. I read the other components and it was very straight forward to make me understand how should I implement my component.

🔗This is my filing Issue on GitHub.

Project Process

This is the website before adding my component.

For starting, I work with basic thing from React App by adding Route to app.js.

import { TextAreaDemo } from './components/TextAreaDemo'
//code
<Route exact path='/textarea' component={TextAreaDemo} />

Next, I added my component to the navigation bar by adding my component to routes array.

const routes = [
//some routes
  { url: '/textarea', name: 'TextArea' }
]

Next, I created file for my React component with this format.

// import necessary packages
import { TextArea } from 'react-neon-ui'

export const TextAreaDemo = () => {
// include some constant databases
  return (
// HTML with React component
  )
}

Here is the final result after implementing the website.

🔗This is my Pull Request on GitHub.

👉The owner of this repo is nice. He corrects me right away when I had problem with updating packages. He showed me steps by steps how to fix my issues. I'm really thankful.

✔️Overall, it is great to work on React that I have not usually used for a long time during Hacktoberfest. Recalling knowledge from WEB422 in Seneca College, I think that React is a really powerful and pretty framework that web has and I'm looking forward to use it frequently in the future.