A modern, responsive web application for managing and viewing the class schedule and assignments for SMKN 7 Samarinda, XI TJKT 2.
- Current Class & Next Class:
- Displays the current and next class, including subject, teacher, time range, and time left.
- Progress bar for the current class.
- Weekly Schedule:
- View the full weekly schedule with day navigation.
- Responsive and visually clear layout.
- Uniform Schedule:
- Shows the uniform schedule for each day.
- CRUD Functionality:
- Add, edit, and delete assignments with subject, details, assigned date, and due date.
- Assignments are persisted using IndexedDB (works offline).
- Status Tracking:
- Assignments automatically update status to "Selesai" when past due.
- Responsive Table:
- Assignments are displayed in a responsive, styled table.
- Modal Form:
- Add/edit assignments via a modal form with validation.
- Custom Notifications:
- User feedback for all actions (add, edit, delete, errors).
- Light & Dark Mode:
- Toggle between light and dark themes using the button in the header.
- Theme preference is saved and persists across sessions.
- All sections, including assignments and modals, update instantly and smoothly.
- Dynamic Input Colors:
- Assignment form fields automatically adjust text and background color for visibility in both themes.
- Mobile Friendly:
- Layout adapts for all screen sizes.
- Header, title, and theme toggle button are always accessible and well-spaced.
- Accessible:
- Proper color contrast and focus states.
- Smooth Transitions:
- Theme changes and section transitions are animated for a modern feel.
- Notification Animations:
- Custom notifications slide in and out.
- Open
index.htmlin your browser. - Toggle theme using the button in the top right.
- View current and next class at the top.
- Navigate the weekly schedule using the day buttons.
- Manage assignments in the "Tugas" section:
- Add new assignments with the yellow button.
- Edit or delete assignments using the action buttons in the table.
- Frontend: HTML, Tailwind CSS, Font Awesome, custom CSS for light/dark mode.
- Persistence: IndexedDB for assignments (offline support).
- No backend required.
- Update schedule data and uniform schedule directly in
script.js. - Adjust styles in
lightmode.cssanddarkmode.cssas needed.
- A GitHub account
- A Vercel account
- A MongoDB Atlas account
- Create a new cluster in MongoDB Atlas
- Create a database user with read/write permissions
- Get your MongoDB connection string
- Replace the password placeholder with your actual database user password
- Whitelist all IP addresses (0.0.0.0/0) for development
-
Push to GitHub:
git init git add . git commit -m "Initial commit" git branch -M main git remote add origin <your-github-repo-url> git push -u origin main
-
Configure GitHub Repository Secrets:
- Go to your GitHub repository
- Navigate to Settings > Secrets and variables > Actions
- Add the following secret:
- Name:
MONGODB_URI - Value: Your MongoDB Atlas connection string
- Name:
-
Connect to Vercel:
- Log in to Vercel and import your GitHub repository
- Go to Project Settings > Environment Variables
- Add the following variables:
MONGODB_URI: Use the same MongoDB connection string
-
Update API_BASE_URL:
- After deployment, get your Vercel deployment URL
- Update
API_BASE_URLinscript.jswith your Vercel URL - Commit and push the changes:
git add Jadwal\ Kelas\ XI\ TJKT\ 2/script.js git commit -m "Update API_BASE_URL" git push
-
Verify Deployment:
- Check Vercel deployment logs
- Test the application
- Verify MongoDB connection
- Test assignment CRUD operations
- Never commit sensitive information like database credentials
- Always use environment variables for secrets
- Keep your GitHub repository secrets secure
- Regularly rotate database passwords
- Monitor your MongoDB Atlas access logs
- Create a local
.envfile (it will be ignored by git):MONGODB_URI=your_mongodb_connection_string - Install dependencies:
npm install
- Start the server:
npm run dev
-
GitHub:
- Go to repository Settings > Secrets and variables > Actions
- Update the existing secrets as needed
-
Vercel:
- Go to Project Settings > Environment Variables
- Edit or add new environment variables as needed
- Check Vercel deployment logs for errors
- Verify MongoDB connection string is correct
- Ensure all required environment variables are set
- Check CORS configuration if API requests fail
MIT