Portal Berita
Description
This project was developed as the final deliverable for the Independent Internship Program at Winnicode Garuda Teknologi, under the Web Developer Department. The Portal Berita (News Portal) is a full-featured web application designed to deliver real-time news updates with a modern, user-friendly interface.
Key Features:
- Dynamic User Interface: Built with Astro and SCSS, providing a visually appealing and interactive user experience.
- API Integration: Fetches and displays up-to-date news articles through seamless API integration.
- Content Management: Supports categorization, filtering, and organization of news articles for easy navigation.
- Responsive Design: Optimized for various devices, ensuring a smooth experience on desktops, tablets, and smartphones.
- Search and Filter Options: Allows users to search for news articles and filter them by category for faster access to relevant content.
- Dark/Light Mode: Offers a customizable viewing experience with dark and light mode options.
Technologies Used:
- Frontend:
- Astro: A cutting-edge framework for fast and optimized web pages.
- React: For building interactive user interfaces.
- Tailwind CSS: A utility-first CSS framework for rapid UI development.
- SCSS & CSS: For modern and maintainable styling.
- HTML: For semantic structure and content presentation.
- Backend:
- JavaScript & TypeScript: For robust logic and type-safe development.
- Express.js: A minimal and flexible Node.js web application framework for building APIs.
- Firebase: A platform for building mobile and web applications, providing backend services.
- Deployment:
- Docker: Used for containerization to simplify deployment processes.
- Hosted on platforms like Vercel or Netlify for scalability.
- Version Control & CI/CD:
- Managed using Git and GitHub Actions for automated build and deployment pipelines.
Contributions:
- Architected and developed the frontend using Astro and SCSS for a sleek design.
- Implemented backend logic using JavaScript and TypeScript, ensuring scalability and maintainability.
- Designed and integrated APIs to fetch real-time news content dynamically.
- Deployed the application using Docker for streamlined and efficient deployment.
- Developed search and filter functionalities to enhance the user experience.
Challenges Overcome:
- Optimized performance for seamless loading, even on slower network connections.
- Integrated complex APIs for dynamic content fetching and processing.
- Delivered a consistent user experience across multiple devices with responsive designs.
Achievements:
- Successfully deployed the application for real-time usage.
- Delivered complete documentation to simplify future development and maintenance.
- Received positive feedback from mentors and users for the project’s quality and usability.
Technology Breakdown:
- JavaScript (54.5%): Core language for application logic.
- Astro (30.3%): Framework for the frontend interface.
- TypeScript (12.8%): Ensures type safety and reduces errors in development.
- SCSS, CSS, HTML (2.2%): Provides styling and page structure.
- Dockerfile (0.2%): Facilitates containerization for deployment.