DEV Community: Adrian Chong

Timer Application for Multiple Events by using Appwrite as Backend

Adrian Chong — Tue, 10 May 2022 22:26:10 +0000

Overview of My Submission

Over time, the timer feature has become essential to many applications, this project will acts as a startup template for those applications.

This project only has one page and it is the timer page. User can add and delete timer for their events.

Submission Category:

Web2 Wizards

Link to Code

phonist / close_count

Timer made with mern stack

Timer Application (Close Count)

User can create multiple timers for their events

About The Project

The project acts as a startup template for timer application.

This project only has one page and it is the timer page. User can add and delete timer for their events.

Built With

Getting Started

This project was developed under Docker environment. So please make sure Docker is installed. To configure the docker environment. Please check docker-compose.yml and Dockerfile. The project is using MERN stack.

After project setup is done, please open your browser, navigate to localhost:3000. Register and login to the application to start creating your timers.

Prerequisites

Docker
NodeJs
React
MongoDB

Installation

git clone https://github.com/phonist/close_count.git
cd close_count
docker-compose up -d --build
navigate to localhost:3000 and start your development

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you…

View on GitHub

ReadtyMap - Speak to Google Maps to find your location.

Adrian Chong — Sun, 10 Apr 2022 17:42:04 +0000

Overview of My Submission

ReadtyMap is a tool that can search for a location by voice, as well as by typing and searching. Deepgram and Google Maps are the technologies being used here.

Sometimes people are just lazy when it comes to typing. People frequently use Google Maps to find the location in many everyday situations. Despite the fact that there are many similar apps available, it is still worthwhile to create a simple one.

Submission Category:

Wacky Wildcards

Link to Code on GitHub

phonist / readtymap

Search location by voice

ReadtyMap

ReadtyMap is a tool that can search for a location by voice, as well as by typing and searching Deepgram and Google Maps are the technologies being used here

About The Project

Build With

Getting Started

Use Voice

Click on the microphone icon.
Start speaking when page showing 'Listening'.
Stop speaking when page shows 'Searching'.
ReadtyMap will show the location.

Development

The majority of the time, development takes place in src/components/Map/, where the keys feature is used.

The deepgram.ts in pages/api/deepgram.ts is used for the speech to text feature, which is called by function in src/components/Map/Autocomplete.tsx.

…

View on GitHub

Prerequisites

Node - 16.2.0
Yarn - 1.22.17
Deepgram acount
Google Maps API key

Installation

git clone https://github.com/phonist/readtymap
cd readtymap
create .env file at root directory and assign value to these keys:

NEXT_PUBLIC_GOOGLE_API_KEY_MAPS=<your google maps api key>
NEXT_PUBLIC_DEEPGRAM_API_KEY=<your deepgram api key>

yarn dev
navigate to localhost:3000 and start your development

Getting Started

Use Voice

Click on the microphone icon.
Start speaking when page showing 'Listening'.
Stop speaking when page shows 'Searching'.
ReadtyMap will show the location.

Development

The majority of the time, development takes place in src/components/Map/, where the keys feature is used.

The deepgram.ts in pages/api/deepgram.ts is used for the speech to text feature, which is called by function in src/components/Map/Autocomplete.tsx.

Meanwhile, the Google Maps API is used for the map feature, which is called by function in src/components/Map/GoogleMap.tsx.

The project structure are depicts below.

pages/
|-- api/
  |-- deepgram.ts
|-- index.tsx
|-- _app.tsx
|-- Map.tsx
redux/
|-- reducers/
|-- actions/
|-- thunks/
|-- types/
      |-- interfaces/
|-- reducers.ts
|-- store.ts
src/
|-- components/
  |-- Map/
    |-- Autocomplete.tsx
    |-- GoogleMap.tsx
    |-- Pointer.tsx
|-- Listening.tsx
|-- Loading.tsx
|-- Searching.tsx

Deepgram.ts is Deepgram's API interface.
All UI components are stored in the src folder.
All redux logic is stored in the redux folder.
All typescript interfaces are kept in the folders types and types/interfaces.

Conclusion

The project is host on readtymap

The first thing that came to mind when I saw that Dev + Deepgram was hosting a hackathon was what I could do with the speech to text API.

Despite the fact that there are numerous similar apps, the first idea that comes to mind is to use voice to search for locations, creating a simple one is still worthwhile.

Developers who want to learn more about Deepgram's speech to text feature can use ReadtyMap as a starting point.
Thank you for providing this platform for us to explore additional software possibilities, Deepgram. :D

Make a TIC-TAC-TOE by using NextJs, React and Redux with Typescript

Adrian Chong — Sat, 09 Apr 2022 06:38:33 +0000

Demo link: https://tictactoe-hu2mk80qr-phonist.vercel.app/
GitHub repo: https://github.com/phonist/tictactoe

About The Project

This is a straightforward Tic Tac Toe game.
The game is build using NextJs on top of React with Typescript.
Then there's redux, redux-thunk, and material-UI.

Build With

Getting Started

The project are mainly categorize into three parts (UI, redux logic and typescript interface):

pages
|-- index.tsx
|-- _app.tsx
|-- Board.tsx
|-- Game.tsx
|-- Square.tsx
redux
|-- reducers
|-- actions
|-- thunks
|-- types
      |-- interfaces
|-- reducers.ts
|-- store.ts

All UI components are kept in the pages folder..
All redux logic are kept inside redux folder.
All typescript interfaces are kept inside types and types/interfaces folder.

Prerequisites

Node - 16.2.0
Yarn - 1.22.17

Installation

git clone https://github.com/phonist/tictactoe.git
cd tictactoe
yarn dev
navigate to localhost:3000 and start your development

Office Management System

Adrian Chong — Tue, 08 Mar 2022 15:50:07 +0000

Office Management System

Various features that are required for office management system.

About The Project

The project acts as a startup template for an office management system.

Dashboard summarizes and visualizes some information of the system. Meanwhile, it also provides a way to access its corresponding feature.

Apart from the dashboard, users can create an account by Facebook, Google, Github or by using their own email address.

To let users create accounts on Facebook, Google, Github,

A developer has to make sure a third-party API is working properly by assigning the correct API key in .env file.

The key to Facebook, Google, and Github is listed in .env file as below:

FACEBOOK_CLIENT_ID=
FACEBOOK_CLIENT_SECRET=
FACEBOOK_REDIRECT_URL=

GOOGLE_CLIENT_ID=
GOOGLE_CLIENT_SECRET=
GOOGLE_REDIRECT_URL=

GITHUB_CLIENT_ID=
GITHUB_CLIENT_SECRET=
GITHUB_REDIRECT_URL=

Built With

Getting Started

This project was developed under Docker environment. So please make sure Docker is installed.
To configure the docker environment. Please check docker-compose.yml and Dockerfile.
The project is using LEMP stack.

After project setup is done, please open your browser, navigate to localhost:80 and login with default credentials.

admin@byteoffice.com

password: 123qwe

Prerequisites

Docker
Composer
NodeJS (optional) for Yarn

Installation

git clone https://github.com/phonist/Office-Management-System.git
composer install
yarn install
docker-compose up -d --build
cp .env.example .env
change the .env file to your own database credentials

e.g
DB_CONNECTION=pgsql
DB_HOST=db
DB_PORT=5432
DB_DATABASE=oms
DB_USERNAME=postgres
DB_PASSWORD=postgres

docker exec oms_app php artisan key:generate
docker exec oms_app php artisan migrate --seed

Usage

The overall features or modules in this projecet are:

Client
Vendor
Invoice
Quotation
Purchase
Product
Employee
Office Settings

Roadmap

[x] Client
[x] Vendor
[x] Sales
- [x] Create Invoice
- [x] All Invoice
- [x] Processing Order
- [x] Pending Shipment
- [x] Delivered Order
- [x] Quotation
- [x] All Quotation
[x] Purchase
- [x] New Purchase
- [x] Purchase List
- [x] Received Product
[x] Product and Services
- [x] Product List
- [x] Import Product
- [x] Category
- [x] Withdrawal
[x] Employee
- [x] Add Employee
- [x] Import Employee
- [x] Employee Employee
- [x] Terminated Employee
- [x] Employee Award
- [x] Set Attendance
- [x] Import Attendance
- [x] Attendance Report
- [x] Application List
- [x] Reimbursement
[x] Office Settings
- [x] Department
- [x] Job Titles
- [x] Job Categories
- [x] Work Shifts
- [x] Working Days
- [x] Holiday List
- [x] Leave Type
- [x] Pay Grades
- [x] Salary Component
- [x] Employement Status
- [x] Tax
- [x] Role
- [ ] Permission

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement" or "bug".
Don't forget to give the project a star! Thanks again!

Fork the Project
Create your Feature Branch (git checkout -b feature/<featureName>)
Commit your Changes (git commit -m 'add <featurename>')
Push to the Branch (git push origin feature/<featureName>)
Open a Pull Request

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Adrian Chong - @twitter_handle - rujyi94@hotmail.com

Project Link: https://github.com/phonist/Office-Management-System

Setup MERN by GitHub Actions

Adrian Chong — Tue, 07 Dec 2021 02:55:21 +0000

Dependencies are frequently dealt with in typical MERN stack applications.
This workflow aims to install dependencies on the server and client sides automatically based on package.json.

My Workflow

Close Count GitHub
Close Count is an example project in which end users can create multiple timers for their events.

There are two major folders: server and client.

As stated in the title, the project is built on top of MERN.

Install dependencies for each server and client side package by package.json

Submission Category:

Wacky Wildcards

Yaml File

When changes are pushed to the master branch, the actions will be triggered. In fact, the master branch serves as the production deployment.

name: Production script

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-20.04

    steps:
      - uses: actions/checkout@v2
      - name: Install Nodejs and NPM
        run: |
          curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
          sudo apt install nodejs
      - name: Install nodejs, npm and yarn
        run: |
          curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg
          sudo apt-key add -echo "deb https://dl.yarnpkg.com/debian/ stable main" 
          sudo tee /etc/apt/sources.list.d/yarn.list
          sudo apt update && sudo apt install yarn
          echo nodejs version
          node -v
          echo npm version
          npm -v
          echo yarn version
          yarn -v
  server:
    needs: build
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
      - name: Install server dependencies
        working-directory: ./server
        run: |
          yarn install
  client:
    needs: build
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
      - name: Install client dependencies
        working-directory: ./client
        run: |
          yarn install

Ubuntu-20.04 was chosen as the operating system for the workflow.
First, install the YARN package manager.
After that, run yarn install in both the server and client folders to install all required dependencies.