Full-Stack Assessment - Suleiman Yahaya#2
Open
garogenius wants to merge 5 commits into
Open
Conversation
Author
|
refactored |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Live Deployment URLs
Frontend: https://form-frontend-beige-five.vercel.app/
Backend: https://form-builder-backend-production-e5f8.up.railway.app/
paostman docs: https://documenter.getpostman.com/view/28328497/2sB3WmS2SV
Overview
A complete form builder web application with user authentication and a drag-and-drop interface for building structured forms.
The solution includes a Laravel 10 backend and a React (Next.js 16) frontend deployed on Railway using Docker.
Authentication
User registration and login with email & password
JWT token-based authentication with auto refresh
Protected routes for authenticated users
Logout functionality
Form Builder
Create and edit forms with custom titles and descriptions
Drag-and-drop fields and groups
Collapsible groups
Support for 8 field types:
Text Input
Email Input
Phone Number
Radio Buttons
Checkboxes
Select Dropdown
Date Picker
File Upload
Form Management
List, edit, delete, and auto-save forms
Real-time UI updates on changes
Confirmation dialogs for destructive actions
User Experience
Clean, modern teal/green UI
Responsive layout
Error handling and loading states
##Key Technical Decisions
Frontend: Next.js 16 + React 19 + TailwindCSS + shadcn/ui
Backend: Laravel 10 + JWT (tymon/jwt-auth)
State Management: React Context API
Database: MySQL with JSON column for form structure
API Design: RESTful JSON endpoints
Why: Next.js and Laravel provide a robust, scalable stack with excellent developer productivity.
##Trade-Offs & Simplifications
Used JSON column instead of multiple normalized tables to simplify schema.
Did not implement full versioning or multi-tenant support to focus on core builder logic.
JWT authentication over session cookies for simplicity of SPA integration.
Clone repository
git clone https://github.com/paxpass/fullstack-devops-assessment.git
cd fullstack-devops-assessment
Copy environment files
cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env
Build and start containers
docker-compose up --build
Run migrations
docker exec -it backend php artisan migrate --seed