About Me
A glimpse into my world
.72ef491c.png&w=3840&q=75)
My Experience
A small list of cool things I use to construct my projects.
Real-world Results
Featured Projects
See how I transformed concepts into engaging digital experiences.
Latest Updates
Work Journal
January 18, 2025
Work Journal - Week 12
This week was focused on exploring various frameworks, experimenting with third-party libraries, and integrating APIs into applications. Here's a breakdown of the week: ### **React Projects and Libraries** #### **1\. React Tutorial** * Followed [Tania Rascia's React Tutorial](https://www.taniarascia.com/getting-started-with-react/) to deepen understanding of React fundamentals: * Explored component structure, JSX, and props. * Halted at the "Pulling in API Data" section. #### **2\. Experimentation with React Libraries** * **Libraries Used:** * **`react-calendar`**: Implemented an interactive calendar. * **`react-awesome-button`**: Enhanced UI with animated buttons. * **`react-player`**: Embedded responsive video players. * Experimented with libraries from the [Awesome React Components list](https://github.com/brillout/awesome-react-components). #### **3\. News API Integration** * Created a **React app** to consume the [NewsAPI](https://newsapi.org/docs/endpoints): * Displayed articles with titles, authors, descriptions, and content. * Implemented a search filter for user-defined queries. * Moved API requests to a Rails backend for secure handling of API keys. #### **4\. GitHub OAuth Integration** * Set up GitHub OAuth authentication: * Registered a GitHub OAuth app and configured frontend/backend routes. * Implemented cookies to manage GitHub access tokens securely. * Built a `GitHubProfilePage` to display authenticated user profiles. #### **5\. React TypeScript Conversion** * Converted a blog frontend into TypeScript: * Added strong type definitions for props, posts, and API responses. * Used TypeScript to enforce type safety across CRUD actions. * Extended the app with user authentication using TypeScript. ### **Rails Backend Development** #### **1\. News API Backend** * Created a **Rails backend** to fetch data from NewsAPI: * Secured API keys using environment variables. * Configured CORS to allow frontend communication. * Added endpoints for fetching and searching articles. #### **2\. Exploring Third-Party APIs** * Tested APIs from the [Public APIs list](https://github.com/public-apis/public-apis): * Integrated API calls into Rails apps using the `http` gem. * Focused on handling authentication and secure request headers. #### **3\. OAuth and Secure Authentication** * Enhanced OAuth capabilities with GitHub: * Used the `http` gem to interact with GitHub's API. * Configured callbacks and profile endpoints to fetch user details. ### **Exploring New Frameworks** #### **1\. Vue.js** * Created a **Vue.js app** following [Tania Rascia's tutorial](https://www.taniarascia.com/getting-started-with-vue/): * Explored Vue components and data binding. * Practiced CRUD operations using the [Vue.js CRUD guide](https://github.com/actualize-day-2024-09/resources/blob/main/guide_vuejs3_vite_crud.md). #### **2\. Ionic Framework** * Began exploring **Ionic React**: * Experimented with building hybrid web/native mobile apps. * Reviewed the official [Ionic documentation](https://ionicframework.com/docs/react). ### **Problem Solving and CLI Skills** #### **1\. Balanced Brackets Problem** * Implemented a solution to validate nested braces in a string using stacks. #### **2\. CLI-Based Tasks** * Worked on file reading and parsing for the [Price Combinations Problem](https://docs.google.com/document/d/18wqpooP_-LXwf7y_SIN1tPoZ2CA9GXfTB6YxWums6yA/): * Learned how to process command-line arguments in Ruby. ### **Takeaways from Week 8** * **Strengthened React expertise**: Experimented with third-party libraries and integrated APIs effectively. * **API Security**: Shifted API key handling to the backend for better security practices. * **Broadened Framework Knowledge**: Started working with Vue.js and Ionic for diverse frontend capabilities. * **Improved Problem-Solving**: Tackled algorithm challenges and learned advanced CLI techniques. This week was an enriching experience in exploring technologies and building confidence in integrating diverse tools\! 🎯
January 11, 2025
Work Journal - Week 11
This week marked the beginning of the capstone project, where I started developing a full-stack productivity application using React and Ruby on Rails. The app is designed to assist users with task management, study session tracking, and productivity enhancement. Here's a detailed summary: ### **Capstone Project: Productivity App** #### **Project Overview** * **Purpose**: A productivity app featuring: * **Pomodoro timer system** for efficient time management. * "Study With Me" sessions using **YouTube's API**. * Comprehensive **task management** functionality. * **Technologies**: React (frontend), Ruby on Rails (backend). ### **Development Process** #### **1\. Planning and Schema Design** * Created the **schema** in Google Sheets to visualize and validate: * **Tables and attributes**: Users, Tasks, Sessions, etc. * Defined **relationships**: * **Users**: `has_many :tasks`, `has_many :sessions`. * **Tasks**: `belongs_to :user`. * **Sessions**: `belongs_to :user`. * Ensured schema integrity with appropriate `id`, `foreign_key`, and constraints. #### **2\. Backend Development (Rails API)** 1. **Initial Setup**: * Built the Rails backend using the API mode. * Added necessary gems (`bcrypt` for authentication, `jbuilder` for JSON views). 2. **Models and Associations**: * Defined models: * **User** with authentication (`has_secure_password`). * **Task** and **Session** models with associations. 3. **Authentication**: * Implemented: * `users#create`: User signup. * `login_sessions#create`: User login with session handling. * Ensured secure password handling using **bcrypt**. 4. **Controllers and CRUD Operations**: * Created: * **SessionsController**: Manage Pomodoro sessions. * **TasksController**: Handle task CRUD operations. * Added **JSON views** for easy frontend integration. * Tested CRUD functionality using **HTTPie**. 5. **Testing**: * Installed **Minitest**: * Wrote unit tests for models and controllers. * Ensured the correctness of associations and validations. #### **3\. Frontend Development (React)** 1. **Setup**: * Used the React CRUD cheat sheet to initialize the app. * Integrated **React Authentication**: * Built components for **Signup**, **Login**, and **Logout**. * Tested authentication flow on the home page. 2. **Task Management**: * Connected frontend to backend API endpoints. * Created components to manage tasks: * **TaskList**: Display all tasks. * **TaskForm**: Add or edit tasks. * **TaskDetail**: View individual task details. ### **Additional Exercises and Learning** #### **1\. Testing and TDD** * Practiced Test-Driven Development (TDD) using Minitest: * Completed exercises for the `Calculator` class: * Wrote tests for **addition, subtraction, multiplication, division**. * Added new methods (e.g., square, power) and their respective tests. * Built a **Coin Machine**: * Wrote a method to convert cents into the minimum number of coins. * Implemented and tested the **FizzBuzz** logic. #### **2\. SQL Practice** * Worked through **SQLBolt** exercises: * Focused on advanced queries using `JOIN`, `WHERE`, `ORDER BY`, and `LIMIT`. * Applied insights to backend query optimizations. #### **3\. Collaboration and Pair Programming** * Paired with a peer for TDD exercises: * Used a ping-pong approach for testing and implementation. * Practiced **mob programming** for collaborative problem-solving. ### **Key Features Built** 1. **Backend API**: * User authentication and session handling. * Full CRUD functionality for tasks and sessions. * JSON responses tailored for React consumption. 2. **Frontend Features**: * Authentication components (Signup, Login, Logout). * Task management interface. 3. **Testing**: * Minitest for backend unit and integration tests. ### **Takeaways** * **Project Planning**: Leveraged schema design tools to plan and validate relationships. * **TDD**: Reinforced the habit of writing tests first to guide development. * **Full-Stack Development**: Strengthened skills in integrating React with Rails APIs. * **Collaboration**: Practiced effective teamwork and communication during exercises. ### **Next Steps** * Build out additional features for the **Pomodoro timer** and **YouTube integration**. * Add frontend styling using **Tailwind CSS**. * Deploy the app for demonstration and feedback. This week set a solid foundation for the capstone project, focusing on robust backend development and seamless front-end integration. 🚀
January 4, 2025
Work Journal - Week 10
During the New Year's week, the focus was on collaborating on a Resume Application team project. I handled the Rails backend, ensuring the API was robust and met the application's requirements. Here's a detailed breakdown: ### **Team Project: Resume Application** #### **Backend Development (Ruby on Rails)** 1. **Initial Setup:** * Created a new Rails API application for the project. * Installed necessary gems and configured **CORS** for frontend-backend communication. * Added and seeded the database with **fake data** to simulate real-world application usage. 2. **Models and Relationships:** * Established `has_many` and `belongs_to` relationships across models: * **Users**: `has_many :experiences, :educations, :projects` * **Experiences, Educations, Projects**: `belongs_to :user` 3. **User Authentication:** * Added `users#create` (signup) and `sessions#create` (login) actions: * Secure password management using **bcrypt**. * Implemented session-based authentication to manage user logins. * Ensured secure handling of user credentials and sensitive data. 4. **CRUD Actions for Models:** * Developed **controllers** for: * **Users**: * `index`: Fetch all users. * `show`: Fetch details of a specific user. * `update`: Update user details with a fallback (`||`) condition. * `destroy`: Soft delete user accounts. * **Experiences, Educations, and Projects**: * Full **CRUD** functionality (Create, Read, Update, Delete). * Refined `update` actions with fallback conditions for better data integrity. 5. **Testing:** * Added **controller tests**: * Verified CRUD operations for all models. * Ensured API responses were accurate and as expected. 6. **Optimizations:** * Addressed potential **N+1 query problems** by leveraging Rails' `includes` method to preload associated data. * Experimented with **pagination** to handle large datasets efficiently: * Users could request paginated results with parameters like `?page=2`. 7. **Key Features Implemented:** * **JBuilder** for JSON responses: * Streamlined data representation for frontend consumption. * Updated and extended the seeds file: * Added 5 more users with relevant data to mimic realistic scenarios. * Fixed update actions for all models, ensuring consistent and error-free updates. ### **Additional Exercises** 1. **SQL Practice with SQLBolt:** * Completed interactive SQL lessons to strengthen database querying skills. * Focused on query optimization techniques such as filtering, ordering, and limiting results. 2. **Rails Best Practices:** * Explored solutions for the **N+1 query problem**: * Researched Rails' approach to eager loading and preloading. * Optimized API performance by minimizing the number of database queries. * Studied Rails ActiveRecord pitfalls and applied recommendations to avoid slow queries. 3. **Collaborative Development:** * Utilized GitHub for team collaboration: * Implemented pull request workflows to ensure clean code merges. * Mob programming sessions for collaborative problem-solving. * Enhanced the repository's **README** to document API endpoints and project details. 4. **Planning for Final Project:** * Reviewed potential project ideas for the final capstone. * Started brainstorming innovative features and technologies for implementation. ### **New Technologies and Skills** 1. **Advanced Rails Development:** * Learned best practices for building performant Rails APIs. * Enhanced proficiency with Rails testing frameworks. 2. **Database Optimization:** * Strengthened SQL skills through exercises and debugging real-world issues. * Implemented pagination and eager loading to improve API efficiency. 3. **Collaboration and Workflow:** * Practiced effective communication and task delegation in a team environment. * Mastered Git workflows with pull requests and code reviews. ### **Takeaways from Week 10** * **Backend Proficiency**: Delivered a scalable and efficient Rails API with robust CRUD functionality. * **Collaborative Coding**: Strengthened teamwork through Git workflows and mob programming. * **Optimization Focus**: Gained deeper insights into database and query optimization in Rails. This week reinforced backend development skills while preparing for future individual and team projects. 🚀
Contact Me
My inbox is always open. Whether you have a question or just want to say hello, I'll try my best to get back to you! Feel free to mail me about any relevant job updates.