Geti website
Company website designed to appear static to regular users but provides dynamic admin capabilities through a hidden admin login page
Project Screenshots
First version of the home page
First version of the about page
Hidden admin login page
First version of the home page in Arabic
First version of the website before uploading real data
Overview
Geti is a multilingual, company website designed to appear static to regular users but provides dynamic admin capabilities through a hidden admin login page. Key features include: • Multilingual Support: The website content is available in English and Arabic, enhancing accessibility and user reach. • Static Appearance for Users: Regular visitors see a polished, professional company site with no indication of dynamic features or admin access. • Hidden Admin Login: A concealed admin login page with a static email and password allows authorized users (site owners) to sign in. • Token-Based Authentication: Upon successful admin login, the user receives a token valid for one hour, enabling secure session management. • Dynamic Dashboard: Authenticated admins can access a dashboard to edit and update website data, making the site content dynamic for owners but static for the public.:
Challenges & Solutions
• Seamless Multi-language Implementation: - Challenge: Delivering both static and dynamic content in multiple languages while maintaining consistency and quality. - Solution: I used an i18n (internationalization) library called next-intl for static content, and I designed the database to store multi-language content allowing admin to upload it himself for dynamic content. • Secure Hidden Admin Access: - Challenge: Ensuring the admin login page is not discoverable to regular users or bots and that access is secure. - Solution: Used a non-obvious URL and static credentials. Implemented token-based authentication to limit session duration (1 hour), minimizing security risks. • Session Management and Security: - Challenge: Preventing unauthorized access and ensuring sessions expire correctly. - Solution: Implemented token expiration logic using cookies and crypto module, and ensured admin-only APIs are protected. • User Experience for Both Roles: - Challenge: Creating a seamless experience where regular users never perceive the admin features, while admins have powerful tools. - Solution: Careful route handling, UI/UX separation, and access control throughout the app. • Handling images uploads and storage: - Challenge: Allowing admins to upload images for the website while ensuring they are stored securely and efficiently. - Solution: Implemented a file upload system using FormData, storing images in a secure directory and linking them to the database entries.
Implementation
Built using: • Next.js for both the frontend and backend, leveraging its server-side rendering capabilities. • Next-intl for internationalization. • MySQL for persistent data. • Prisma as the ORM for database interactions. • Tailwind CSS for styling, ensuring a responsive and modern design.