omardugha03 / spacex

An immersive frontend portion dedicated to showcasing SpaceX with a dark space theme. launches, and achievements in a visually captivating environment. Engage with interactive elements, enjoy smooth animations, and experience seamless navigation across different devices

SpaceX Frontend Portion Project

Description

This project is a frontend portion dedicated to showcasing SpaceX-related content with a dark space theme.

Features

• Dark space theme: Immerse users in a visually captivating environment reminiscent of outer space.
• Interactive elements: Engage users with interactive components, such as dropdown menus and animated icons.
• Responsive design: Ensure a seamless experience across different devices and screen sizes.
• Detailed content: Provide comprehensive information about SpaceX's missions, launches, and achievements.
• Smooth animations: Enhance user experience with fluid animations powered by Framer Motion.

Technologies Used

• Next.js: Framework for React-based web applications, enabling server-side rendering and seamless navigation between pages.
• React: Library for building user interfaces with reusable components.
• react-icons: Library for including popular icons in React projects, enhancing visual appeal.
• Framer Motion: Library for creating fluid animations in React applications, adding polish to user interactions.
• Tailwind CSS: Utility-first CSS framework for building responsive designs quickly and efficiently.
• Three.js: JavaScript 3D library for creating and displaying 3D graphics in web applications.

Dependencies

• @radix-ui/react-dropdown-menu: Library for creating dropdown menus.
• @radix-ui/react-slot: Library for working with slots in React components.
• @react-three/drei: Collection of useful helpers and abstractions for react-three-fiber.
• @react-three/fiber: A React renderer for Three.js.
• class-variance-authority: Dependency for managing class variance.
• clsx: Library for conditionally joining classNames together.
• framer-motion: Library for creating animations in React.
• lucide-react: Icon library for React.
• mini-svg-data-uri: Utility for converting SVG files to data URIs.
• next: Framework for React-based web applications.
• react: Library for building user interfaces in React.
• react-dom: DOM-specific methods for React.
• react-icons: Library for including popular icons in React projects.
• tailwind-merge: Utility for merging Tailwind CSS classes.
• tailwindcss-animate: Tailwind CSS plugin for adding animations.
• three: JavaScript 3D library.
• three-globe: Library for creating 3D globes with Three.js.

Development Dependencies

• @types/node: TypeScript type definitions for Node.js.
• @types/react: TypeScript type definitions for React.
• @types/react-dom: TypeScript type definitions for ReactDOM.
• autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes.
• eslint: JavaScript linter.
• eslint-config-next: ESLint configuration for Next.js projects.
• install: Dependency installer.
• npm: Package manager for JavaScript.
• postcss: Tool for transforming CSS with JavaScript plugins.
• prettier: Opinionated code formatter.
• prettier-plugin-tailwindcss: Prettier plugin for formatting Tailwind CSS.
• tailwindcss: Utility-first CSS framework for creating responsive designs.
• typescript: Superset of JavaScript with static type-checking capabilities.