Project Overview

Hanashi-App is a live-chatting platform that allows users to exchange text messages and images effortlessly.
The app's name derives from the Japanese word 'hanashi' (話), signifying 'chat' or 'talk.'

Technologies Used

- Websocket API: For real-time server connections and communication.
- Tailwind CSS: Ensuring stylish design and responsiveness.
- MongoDB: Storing user credentials and conversation data.
- JSON Web Token (JWT): Ensuring secure authentication and session management.
- Node.js: Handling server operations, including user registration and routing.
- Axios: Initiating HTTP requests on the client side.
- Express: For server routing.
- Mongoose: Defining data schemas.
- Nightwind: Facilitating theme management.

Challenges

One major challenge was efficiently handling cached conversations, preventing redundant server requests, and optimizing message storage. A useRef hook was used to address this issue and preserve values between renders.

Key Features

Hanashi-App offers essential features like user authentication, real-time messaging (text and images), theme customization, online user indicators, secure JWT tokens, message timestamps, and responsive design.

Testing

To test this app please create an account or use the following credentials:
username: test, password: secret.
It may take a while for the server to start due to my free hosting plan.

Project Overview

Daijob is a networking platform designed to connect users with career opportunities and industry peers. With a name derived from the Japanese word 'daijobu' (大丈夫), which signifies 'good' or 'alright,' Daijob aims to make your professional life 'alright' by offering a wide range of features and tools for career growth and networking.

Technologies Used

- Firebase: The app utilizes Firebase for user authentication, real-time database, and storage services.
- React: The front-end of the application.
- Redux: For state management.
- React Router: Routing.
- Styled Components: Flexible and maintainable approach to styling.
- Firebase Cloud Firestore: For storing and retrieving job listings, user profiles and posts.
- Firebase Storage: For storing files such as profile pictures and documents.

Challenges

The biggest challenge was ensuring state and API functionality throughout the app.

Key Features

- User Authentication which includes Google authentication
- Event management
- Real-time Messaging.
- Job Listings
- File Uploads
- Responsive Design
- User Profile Customization
- Likes and comments

Testing

To test this app please create an account or use the following credentials:
username: test3@gmail.com, password: secret.

Project Overview

Fearow Blast is an HTML5 canvas-based sprite animation game that challenges players to shoot down flying Fearow characters. Building this project was lots of fun! Fearows are cool.
Can you beat my highscore?

Technologies Used

- HTML5: The foundation for the game's structure and user interface.
- JavaScript: Used for game logic, animation, and interactivity.
- Canvas: HTML5 canvas was utilized for rendering game graphics and animations.
- Image Preloading: Images were preloaded for optimization purposes to ensure smooth gameplay.
- Audio: Game audio effects were included for immersive gameplay.

Challenges

Some of the more notable challenges I have encountered while building this game project include implementing an accurate collision detection logic for the flying characters and preloading game assets and managing animations to ensure a smooth experience. A notable mention should be the fact that I had to prepare the sprite sheet for the Fearows to suit the game mechanics.

Key Features

- Sprite Animations: Fearow characters and explosions are smoothly animated, enhancing visual appeal.
- Scoring System: Players are rewarded with points for each Fearow shot down.
- Explosions: Explosions add excitement to the game, triggered when Fearows are hit.
- Dynamic Gameplay: Fearow characters move dynamically on the screen, challenging players' shooting skills.
- Replayability: After the game ends, players can click anywhere to start a new round, keeping them engaged.

Project Overview

The Memag app is a dynamic web application that offers users an engaging e-commerce platform.

Technologies Used

- React: The foundation for building an interactive and responsive user interface.
- Firebase: Employs Firebase services for user authentication, real-time databases, and cloud functions.
- React Router: Utilized for efficient navigation and routing within the application.
- Stripe: Integrated for secure online payment processing, allowing users to make purchases.
- MUI (Material-UI): Offers pre-designed UI components for a sleek and consistent app appearance.
- Moment.js: Utilized for formatting and presenting date and time information.

Challenges

The most notable challenge while building this app was implementing the Stripe payment logic.

Key Features

- Product Listings
- User Profiles
- Secure Payments
- Shopping Cart
- Order Placement
- Responsive Design

Project Overview

The Admin Dashboard app is a tool designed to provide administrators with real-time statistics and data visualizations. The app serves as an interface to view essential information related to user management, product statistics, customer data, and transaction insights. This app was my foundation stone for using MongoDB and Node.js and helped me transition from Firebase.

Technologies Used

- React: Frontend.
- Redux Toolkit: For state management.
- Material-UI: For styling.
- React Router: Managing navigation within the app.
- Node.js: For server-side processes.
- Express: Server.
- Mongoose: Database interaction.
- MongoDB: Database for storing and retrieving data efficiently.

Challenges

The main challenge was posed by retrieving and paginating the large amounts of data used in the charts.

Key Features

- Admin Section: An interface for viewing and managing administrators, including features such as searching and sorting.
- Transactions Section: Server-side pagination, sorting, and searching functionality for efficient transaction data retrieval.
- Data Visualization: Displaying data in both tabular formats and visualizations to aid administrators in understanding complex statistics.