Welcome to my first React app project, created as part of the Web Development program at Full Sail University! This app, dubbed "Avocado," (just a random name) is a social media-style interface featuring a news feed, messages, watch section, and ad cards.
September 8, 2025 Update: This is its FIRST iteration. It's non-functional, but will be developed throughout my current 4-week course at Full Sail.
- Class-based
App.jsxcomponent. - Functional components:
Button,Form,Header,LeftNav,Logo,MyAvatar,AdCard,PostCard,SearchBar. - Props usage for dynamic content.
- CSS-in-JS for styling.
- Custom icons via
react-icons. - Styled
Buttoncomponent usingstyled-components. - Custom images for logo, favicon, and ads.
Per the course requirements, this 1st iteration cannot use function-based components. We also must use CSS-in-JS and all styling and component create must have been, and was of, my own creation 🙏
- React (via Vite)
react-iconsstyled-components- CSS-in-JS
- Clone the repository:
git clone <repository-url> - Navigate to the project directory:
cd react-avocado-app - Install dependencies:
npm install - Start the development server:
npm run dev - Open your browser and visit
http://localhost:5173
- Initiated with
npm create vite@latest my-app -- --template react. - Installed
react-iconswithnpm install react-icons --save. - Added
styled-componentswithnpm install styled-componentsfor theButtoncomponent. - Avoided
useStateas per requirements. - Used custom-sourced images for ads, logo, and favicon.
Big thanks to Full Sail University for the guidance and to the open-source community for the tools that made this possible!
Hi! I’m Phillip Cantu, an American digital nomad, a Full Sail University web development student, and a 4Geeks Academy Full Stack Development with AI Bootcamp. I’m passionate about creating modern, user-friendly, and practical applications that help people learn and build faster.
You can find me here:
- GitHub: hereisphil
- LinkedIn: PhillipCantu
- Instagram: @philtheotaku