Home

2024-01-28

Web Development

NEXTSVELTEKITCSSWEBNODEJSJS/TS

Web Apps ❤️

Grade Report

SvelteKitTailwind CSSNodeJSMongoDBLucia AuthUploadThingGoogle SMTPTypeScriptViteChartJS

Overview

The Grade Report System is a comprehensive web application designed to streamline grade management for educational institutions. It provides a secure, minimalist, and easy-to-navigate environment tailored for admins and instructors, while ensuring students can access their grades conveniently. The system is built with scalability, security, and usability in mind, featuring advanced functionalities like student ID verification, instructor invitations via email, and a notification system.

Key Features

The Grade Report System is a secure, minimalist platform for managing and delivering grades. Key features include:

  1. Grade Management: Admins and instructors upload, manage, and publish grades; students view them in a clean interface.
  2. Student ID Verification: Students upload IDs via UploadThing; admins verify and approve IDs.
  3. Instructor Invitations: Admins invite instructors via Google SMTP emails with secure OTP passwords.
  4. Notification System: Real-time alerts for grade updates, ID verification, and report publications.
  5. Admin Dashboard:
    • Invite instructors.
    • Create/manage courses and control visibility.
    • Approve/restrict student access.
    • Publish/unpublish grade reports.
  6. Secure Design: Separate from main student records, ensuring data security and compliance.
Live Site

Svelte Articles

SvelteKitTailwind CSSTypeScriptMDXVidstackRehype PluginsRemark PluginsBigger PictureAnalytics

Overview

Svelte Articles is a modern article server built with SvelteKit, designed to host richly formatted articles with support for embedded media, code syntax highlighting, and responsive design. Ideal for personal blogs or documentation, it provides an elegant reading experience powered by MDX, custom video embedding, and gallery systems.

Key Features

The Svelte Articles project is a full-featured, developer-friendly publishing platform. Core functionalities include:

  1. MDX-Based Articles: Write articles using enhanced Markdown (MDX) with JSX components. Each article includes structured frontmatter metadata for easy configuration.
  2. Syntax Highlighting: Beautiful and performant code blocks with rehype-pretty-code, supporting GitHub-flavored Markdown via remark-gfm.
  3. Dynamic Table of Contents: Automatic TOC generation based on article headings for better navigation.
  4. Tag Filtering & Ordering: Filter articles by tags and control display order with frontmatter fields.
  5. Media Gallery System:
    • Organize images and videos under each article.
    • Gallery layout with lazy loading and bigger-picture lightbox support.
    • Optimized for performance and responsiveness.
  6. Custom Video Embedding: Separate from main student records, ensuring data security and compliance.
    • Embed local videos using vidstack.
    • Embed external videos from YouTube and Vimeo using custom MDX components.
  7. Responsive Design: Mobile-friendly layout using Tailwind CSS
  8. Analytics Integration: Track views and engagement using @loglib/tracker.
  9. Media Management: Organized under the public directory, each article has its own directory for all related media assets. Supports serverelss environments with a manifest media manager.
Live Site | GitHub

Spotlight

Next.jsTailwind CSSMongoDBStripeClerkUploadThingTypeScriptRadix UIChapaReact Hook Form

Overview

The Spotlight Portfolio Platform is a dynamic web application that allows users to create personalized portfolio pages accessible via a unique link. Designed for professionals, creators, and developers, it enables users to showcase their projects, tell their story using customizable content blocks, and integrate advanced features like online payments, file uploads, and custom themes.

Key Features

The Link-in-Bio Portfolio Platform is a versatile and user-friendly tool for building professional portfolios. Key features include:

  1. Customizable Portfolio Pages: Users create a unique link (e.g., spotlight.et/username) and customize their portfolio with various content blocks.
  2. Content Blocks:
    • Challenge vs Solution: Highlight project challenges and solutions.
    • Highlights: Showcase key achievements or features.
    • Media Embeds: Add videos, image galleries, and social media embeds.
    • File Uploads/Embeds: Upload resumes, project files, or other documents.
  3. Customizable Themes: Users can personalize their portfolio’s look and feel with custom themes.
  4. Subscription Payments: Integrated Stripe and Chapa for online payments and subscription plans.
  5. Complete User Profiles: Add social links, skills, and resume uploads to build a comprehensive professional profile.
  6. Secure Authentication: Clerk for secure user sign-up and login.
  7. File Management: UploadThing for handling file uploads and media storage.
Live Site

Etuber LMS

Next.jsTailwind CSSMongoDBLucia AuthUploadThingTypeScriptRadix UIDND KitResendReact Hook Form

Overview

The Etuber LMS is a modern Learning Management System (LMS) designed to provide a seamless and interactive learning experience. Built with scalability and usability in mind, it offers features like course management, drag-and-drop content organization, video streaming, and secure authentication. The platform is tailored for educators and learners, ensuring a smooth and engaging educational journey.

Key Features

The Etuber LMS is a robust and user-friendly platform for managing and delivering educational content. Key features include:

  1. Course Management: Educators can create, organize, and publish courses with ease.
  2. Drag-and-Drop Content Organization: Use DND Kit for intuitive course content arrangement.
  3. Video Streaming: Integrated Vidstack and Plyr for high-quality video playback.
  4. Secure Authentication: Lucia Auth for secure user sign-up and login.
  5. File Management: UploadThing for handling files.
  6. Free and Secure Video Hosting: video hosted on Youtube video protected url for fast and free content hosting.
  7. Analytics: Loglib Tracker for monitoring user engagement and course performance.
  8. Referral Marketing System: Users can earn money by referring friends.
Live Site

HuleChereta

Next.jsTailwind CSSMongoDBLucia AuthUploadThingTypeScripti18nextGoogle APIsReact MarkdownDaisyUI

Overview

The Chereta Auction Platform is a specialized Ethiopian auction platform tailored for the real estate market. It features multilanguage support (Amharic and English) and is designed to handle large volumes of data, including user registrations and downloadable files. Built to meet the needs of a traditional company, it includes custom solutions like Excel-based user registration and organized file management. Although the service is currently discontinued, the platform showcases innovative solutions to unique challenges.

Key Features

The Chereta Auction Platform is a robust and user-friendly platform for managing auctions and real estate listings. Key features include:

  1. Multilanguage Support: Integrated i18next for seamless Amharic and English language support.
  2. Custom User Registration: Built a custom registration form to save user data directly to Excel files, as requested by the client.
  3. File Management: Organized and presented large volumes of downloadable files without compromising aesthetics.
  4. Real Estate Listings: Displayed property details with React Markdown for rich text formatting.
  5. Secure Authentication: Lucia Auth for secure user sign-up and login.
  6. Google APIs: Integrated Google services for additional functionality.
  7. Responsive Design: Used Tailwind CSS and DaisyUI for a clean, responsive, and visually appealing interface.
  8. Deployment: Successfully deployed on a barebones VPS, showcasing adaptability to client infrastructure needs.

Challenges and Solutions

Excel-Based Registration

  • Challenge: The client required user registrations to be saved directly to Excel files, which is unconventional for web applications.
  • Solution: Built a custom registration form that writes data to Excel files using formidable and xlsx.

File Organization:

  • Challenge: Managing and presenting a large volume of downloadable files without degrading the site’s aesthetics.
  • Solution: Implemented a structured file management system with UploadThing and designed a clean UI for file presentation.

Multilanguage Support:

  • Challenge: Ensuring seamless language switching between Amharic and English.
  • Solution: Integrated i18next and next-i18n-router for efficient multilanguage support.

Deployment on VPS:

  • Challenge: Deploying the application on a barebones VPS, which required manual setup and configuration.
  • Solution: Successfully deployed the platform, demonstrating adaptability to client infrastructure requirements.

PraxiBox

SvelteKitTailwind CSSTypeScriptSHADCN SVELTE

This was a passion project I built a while ago. It was meant to be a practice question bank for college students. I would still like to get back to it and build out the whole system. Here is the components I built for it.

Live Site

Static Sites

Topk Portfolio Template

HTMLCSSJS

This was my build out of a twitter trending ui design of a portfolio template. It has a minimalist design and is responsive. I used some neat tricks to make the interactions work with out any javascript.

Live Site | GitHub

Boston University Brochure

HTMLCSSJS

Vanilla JS, HTML, and CSS build out of a Boston University brochure design.

Live Site | GitHub

Sushi Restaurant Website

HTMLCSSJS

Sushi restaurant website built with HTML, CSS, and JS.

Live Site | GitHub

nalonix.dev