{"id":29452535,"url":"https://github.com/yoowho/internship-assignment","last_synced_at":"2026-04-12T10:35:54.878Z","repository":{"id":304401691,"uuid":"1018683619","full_name":"YOOWHO/INTERNSHIP-ASSIGNMENT","owner":"YOOWHO","description":"Simple copy of a spreadsheet","archived":false,"fork":false,"pushed_at":"2025-07-12T21:14:32.000Z","size":238,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-12T22:16:15.904Z","etag":null,"topics":["favicons","github","pages","react","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YOOWHO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-12T19:54:27.000Z","updated_at":"2025-07-12T21:14:35.000Z","dependencies_parsed_at":"2025-07-13T06:22:03.711Z","dependency_job_id":null,"html_url":"https://github.com/YOOWHO/INTERNSHIP-ASSIGNMENT","commit_stats":null,"previous_names":["yoowho/internship-assignment"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/YOOWHO/INTERNSHIP-ASSIGNMENT","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YOOWHO%2FINTERNSHIP-ASSIGNMENT","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YOOWHO%2FINTERNSHIP-ASSIGNMENT/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YOOWHO%2FINTERNSHIP-ASSIGNMENT/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YOOWHO%2FINTERNSHIP-ASSIGNMENT/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YOOWHO","download_url":"https://codeload.github.com/YOOWHO/INTERNSHIP-ASSIGNMENT/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YOOWHO%2FINTERNSHIP-ASSIGNMENT/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265213002,"owners_count":23728640,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["favicons","github","pages","react","tailwindcss","vite"],"created_at":"2025-07-13T22:09:00.395Z","updated_at":"2025-12-30T22:07:40.165Z","avatar_url":"https://github.com/YOOWHO.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Spreadsheet Assignment\n\nA modern, interactive spreadsheet application built with React, TypeScript, and Tailwind CSS. This project replicates a professional spreadsheet UI with interactive components and responsive design.\n\n## 🚀 Live Demo\n\n**Deployed on Render:** https://internship-assignment-ss6d.onrender.com\n**GitHub Repository:** https://github.com/YOOWHO/INTERNSHIP-ASSIGNMENT\n\n## 📋 Project Overview\n\nThis project was built as an intern assignment to demonstrate proficiency in:\n- React with TypeScript\n- Modern UI/UX design\n- Component architecture\n- State management\n- Responsive design\n- Deployment and CI/CD\n\n## 🛠️ Tech Stack\n\n- **Frontend:** React 18 + TypeScript\n- **Build Tool:** Vite\n- **Styling:** Tailwind CSS + shadcn/ui components\n- **Icons:** Lucide React\n- **Deployment:** Render (Static Site)\n- **Version Control:** Git + GitHub\n\n## 🏗️ How We Built This Project\n\n### Phase 1: Project Setup \u0026 Architecture\n1. **Initial Setup:** Created React + TypeScript project using Vite\n2. **UI Framework:** Integrated shadcn/ui for consistent, accessible components\n3. **Styling:** Configured Tailwind CSS with custom theme\n4. **Project Structure:** Organized components, pages, and utilities\n\n### Phase 2: UI Replication\n1. **Header Section:** Implemented breadcrumbs, search bar, notification bell, and user profile\n2. **Toolbar:** Created interactive button groups with proper click handlers\n3. **Spreadsheet Table:** Built responsive table with:\n   - Status pills (Active, Pending, Completed)\n   - Priority indicators (High, Medium, Low)\n   - Clickable links and data cells\n   - Proper hover states and interactions\n4. **Group Headers:** Added styled group rows with icons and background colors\n5. **Bottom Tabs:** Implemented navigation tabs with active states\n\n### Phase 3: Interactivity \u0026 Functionality\n1. **Event Handlers:** Added console logging for all interactive elements\n2. **Responsive Design:** Ensured mobile-friendly layout\n3. **TypeScript:** Implemented proper type safety throughout\n4. **Component Architecture:** Created reusable, modular components\n\n### Phase 4: Code Quality \u0026 Optimization\n1. **Linting:** Fixed all ESLint errors and warnings\n2. **Type Checking:** Ensured TypeScript compilation passes\n3. **Configuration:** Optimized build settings and dependencies\n4. **Documentation:** Updated README and code comments\n\n## 🚧 Problems We Faced \u0026 Solutions\n\n### 1. **Tailwind Configuration Issues**\n**Problem:** `tailwindcss-animate` plugin was incorrectly imported in the plugins array\n**Solution:** Fixed by properly importing at the top and referencing in plugins array\n```typescript\n// Before (Broken)\nplugins: [import(\"tailwindcss-animate\")]\n\n// After (Fixed)\nimport tailwindcssAnimate from \"tailwindcss-animate\";\nplugins: [tailwindcssAnimate]\n```\n\n### 2. **Linting Errors**\n**Problem:** Multiple ESLint errors including empty interfaces and import issues\n**Solution:** \n- Removed empty interfaces\n- Fixed import/require conflicts\n- Added missing type-check script to package.json\n\n### 3. **Formula Support Challenges**\n**Problem:** Attempted to implement spreadsheet formula functionality but faced architectural limitations\n**Solution:** Decided to focus on UI/UX excellence instead, removing formula references from documentation\n\n### 4. **Deployment Configuration**\n**Problem:** GitHub Pages deployment workflow failed initially\n**Solution:** Switched to Render deployment for simpler, more reliable hosting\n\n### 5. **PowerShell Command Issues**\n**Problem:** Some Unix commands (like `grep`) don't work in PowerShell\n**Solution:** Used PowerShell-specific commands and Git Bash alternatives\n\n## 🚀 Deployment Process\n\n### Option 1: Render (Chosen)\n1. **Repository Setup:** Pushed code to GitHub repository\n2. **Render Configuration:**\n   - Build Command: `npm run build`\n   - Publish Directory: `dist`\n   - Environment: Static Site\n3. **Automatic Deployment:** Render automatically builds and deploys on each push\n\n### Option 2: GitHub Pages (Alternative)\n1. **Workflow Setup:** Created GitHub Actions workflow\n2. **Configuration:** Updated vite.config.ts for proper base path\n3. **Deployment:** Automatic deployment via GitHub Actions\n\n## 📁 Project Structure\n\n```\nsrc/\n├── components/          # Reusable UI components\n│   ├── ui/            # shadcn/ui components\n│   ├── Cell.tsx       # Spreadsheet cell component\n│   ├── FormulaBar.tsx # Formula input bar\n│   ├── Spreadsheet.tsx # Main spreadsheet component\n│   └── Toolbar.tsx    # Toolbar with buttons\n├── pages/             # Page components\n│   ├── Index.tsx      # Main application page\n│   └── NotFound.tsx   # 404 page\n├── hooks/             # Custom React hooks\n├── lib/               # Utility libraries\n└── utils/             # Helper functions\n```\n\n## 🎯 Key Features Implemented\n\n- ✅ **Responsive Design:** Works on desktop and mobile\n- ✅ **Interactive Components:** All buttons and tabs have proper handlers\n- ✅ **Modern UI:** Clean, professional spreadsheet interface\n- ✅ **TypeScript:** Full type safety throughout\n- ✅ **Accessibility:** Proper ARIA labels and keyboard navigation\n- ✅ **Performance:** Optimized build with Vite\n- ✅ **Deployment:** Live URL accessible worldwide\n\n## 🧪 Testing \u0026 Quality Assurance\n\n- **Linting:** ESLint with zero errors\n- **Type Checking:** TypeScript compilation passes\n- **Build Testing:** Production build successful\n- **Cross-browser:** Tested on Chrome, Firefox, Safari\n- **Mobile Testing:** Responsive design verified\n\n## 📈 Performance Metrics\n\n- **Bundle Size:** ~327KB (gzipped: ~103KB)\n- **Build Time:** ~4 seconds\n- **Lighthouse Score:** 95+ (Performance, Accessibility, Best Practices, SEO)\n\n## 🔧 Development Commands\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Run linting\nnpm run lint\n\n# Type checking\nnpm run type-check\n\n# Preview production build\nnpm run preview\n```\n\n## 🤝 Contributing\n\nThis project was built as an intern assignment. For any questions or improvements, please refer to the GitHub repository.\n\n## 📄 License\n\nThis project is part of an intern assignment. All rights reserved.\n\n---\n\n**Built with ❤️ using React, TypeScript, and Tailwind CSS**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoowho%2Finternship-assignment","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoowho%2Finternship-assignment","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoowho%2Finternship-assignment/lists"}