Hi, my name is Lionel Ritchie, and I am currently working as <b>Research and Development Staff</b>, acting as <strong>Full Stack Developer</strong> to maintain and develop web-based system application in Software Laboratory Center at Binus University to support operational, recruitment, and learning management systemused by both internal and students.

My main interest and expertise is in web development field. I am most comfortable using Javascript/Typescript and its frameworks, such as React, Angular, Vue, NextJS, NestJS, etc.

Hero and Random Food Section

Meal Plan and Random Trivia & Joke section

Foodie

In this page, user could view cuisine, recommended recipe, and search recipes

Home Page

In this page, user could view detailed information about a recipe, such as description, taste, ratings from other users, nutritions, and ingredients

Recipe Detail Page

In detail page, user could also use some extended features such as view recipe instructions, view ingredients, view equipments needed, add to saved recipe, and add to meal plan

Detail Page Extended Features

User could generate a recommended meal plan for a day using the meal plan generator, and see the meal plan in week format.

Meal Plan

User could find recipes categorized by cuisine or name similarity

Search by name and cuisine

Ladaa

User could authenticate his/her self and will be redirected to home page upon logged in.

Login Page, Register Page, Home Page, Navigation

User could donate and track their donation and know how to recycle a trash

Donate Page, Track Donation, How to Recycle Page

The app also provide users with useful information and reward

Article and Reward Page

User could see their saved address, activity history, and get some help from help center.

Saved Address, Activity History, and Help Center

Walking Waste

User could login and register in the app. After logged in, user will be redirected to the home page

Landing Page, Login Page, Register Page, Home Page

User could specific sub category within a category and see its products.

Category Page, Sub Category Page, Product Listing Page

Each products will have its own variation and different interface based on the product type and category.

Product Detail Page

User could add a product to the cart and checkout.

Cart Page, Order Page, Order Confirm Page, Order Success Page

User could track his/her order, chat with CS, and see/update his/her profile.

Tracking Page, Chat, Profile & Update Profile Page

User could request a custom interior/architecture/furniture from the app.

Customizing Interior/Architecture/Furniture

Build In

In home page, the app will show recommended games, special offers, community recommendation, and picked games, all with real data from database.

The app will check for the game genre. If the game contains mature content, then the app will prompt user to enter his/her age. Otherwise, the app will show details of the games.

Game Detail Page

Cart and Wishlist Page

Search Page

User could register and authenticate his/herself. Upon registering, the application will also send OTP code from email

Login and Register

In profile page, user could see his/her information, owned games, comment from others users, and friends

Profile Page

User could edit his/her profile (personal info, avatar, profile bg, etc) and could see his/her friends. User could also add new friends.

Edit Profile and Friends Page

User could see their see their inventory and buy in-game items from other users

Market Page

This page will show user's selected market item from the market page, user could buy and sell item in this page. The data will be real time because it uses web socket

Market Detail Page

This page will show user's posted images, discussions, and reviews

Community Page

User could buy custom avatar or background for their profile in the points page

Points Page

Staem (Steam Clone)

First Section

Second Section

Third Section

Gojek Homepage Clone

Authenticate user and show games that has been joined by current logged-in user.

Login and Home Page

Player can go to the Join Page to input game code. If game code exist, then player will be redirected to the game detail page.

Join and Game Detail Page

Player could select a team or create their own team.

Select and Create Team Page

After having a team, player will be redirected to Play Page. Player could see missions of the game and current rankings in Leaderboard.

Play Page (Missions and Leaderboard)

Player could see other team's submissions and their own team's submissions

Play Page (Feeds and My Team)

Mission detail page for multiple choice and photos answer type

Mission Detail (Multiple Choice & Photos)

Mission detail page for verification and text answer type

Mission Detail (Verification & Text)

Mission detail page for location answer type and global leaderboard page

Mission Detail for Location and Global Leaderboard 

Beechase

Authenticate user and show list of consultations.

Admin can view detail of the consultation which consists of queue of the registered students in the selected consultation. Admin can insert problem and solution for each student. Admin will call student according to the queue. The queue will dynamically change upon status change.

Consultation Detail (Admin)

Student can view detail of the consultation which consists of their current queue number and other details regarding to their problem.

Consultation Detail (Student)

Enrichment Consultation App

Authenticate user using Sign in with Google.

Login Page

In home page, user can view their wallets and a simple report regarding to their incomes and expenses. In wallet page, user can view list of their wallets.

Home and Wallet Page

Upon selecting a specific wallet in Wallet page, user will be redirected to the detail of the wallet. In Records page, user can see list of their added records (income/expense).

Wallet Detail and Records Page

User can add a new wallet and a new record.

Add Wallet and Add Record Form

Money Manager

In home page, admin can view announcements, ticket summary, and latest emails. Emails that has not been marked more than 7 days since it was received will be shown with higher importance.

Home Page (Admin)

In home page, super admin can view reports about ticket handlings in each semester. Reports for a specific admin can also be viewed through this page.

Home Page (Super Admin)

In home page, user can view announcements, ticket summary, and guidelines about Enrichment Program.

Login Page and Home Page (User)

When an admin select a message in home page, detail of the message will be shown (general information and content of the message). Admin can then choose to mark the message as Ticket, Information, or Junk.

Message Detail Modal

In tickets page, a list of tickets that relates to the current logged in user will be shown. Several importat information about the ticket, such as its priority, due date, etc, will be shown in the table. Meanwhile in Informations page, a list of message marked as Information will be shown there.

Tickets Page and Information Page

In details tab, detail of the ticket will be shown, such as its current status, priority, content of the message, etc. Admin can reply to the message directly, and mark a message as solution to the ticket.

Ticket Detail Page - Detail Tab

In manage ticket tab, admin can manage the ticket, such as changing its status, updating its due date, etc. Meanwhile in history tab, histories of the ticket will be shown chronologically.

Ticket Detail Page - Manage Ticket and History Tab

There are four statuses when managing a ticket: Assigned (just created), In Progress, Resolved, and Closed. There is also a special status which is Pending (the ticket need coordination with other parties and the due date will be freeze indefinitely). A ticket is considered done if its status is Closed

Ticket Detail Page - Update Status

Notifications for current user will be shown in this page. It can also be viewed in notification widget in navbar.

Notification Page

When an admin selects an information, the detail of the information will be shown.

Information Detail Modal

Super Admin can manage master data (CRUD), such as semesters, ticket categories, etc.

Hi, I am

Lionel Ritchie

A little about me

FeaturedWorks

Staem (Steam Clone)

Gojek Homepage Clone

Beechase

Money Manager

Enrichment Helpdesk

Any Inquiries?