The Travel-themed website is built using technologies including the React library for the frontend, Node.js for the server-side, and MySql database to handle data storage and retrieval.
The website has been designed into four main features include: Member Center, Travel Blog, E-commerce Platform, and a customizable touring feature.
In this project, I was responsible for both the front-end and back-end development of a blog page. My contributions included a range of tasks that enabled the creation of a functional blog page.
Frontend:
- Designed and implemented the CKEditor as the article editor, enabling users to create and edit articles
- Added the functionality for users to add hashtags to their articles, increasing their richness and exposure
- Implemented the like feature that allows users to show their appreciation for articles
- Integrated the official weather API open data to provide weather forecasts for different regions of Kaohsiung, enhancing the user experience
Backend:
- Worked on the database design and implementation
- Developed APIs to handle front-end requests and stored data in a mySQL database
- Implemented parameter validation to verify if the id in the parameter exists in the database. If it does not exist, the user is redirected to a not-found page
Overall, my contributions to this project were crucial to creating a functional blog page.
I was responsible for designing and structuring the website's online store, as well as implementing the shopping process. I integrated the Stripe API to handle credit card authentication and payments, ensuring that customer information remains secure.
Implementations include:
- Search, filter and sort the products and display them with infinite scrolling
- Designed the shopping cart modal and use useContext to synchronize data throuout the site
- Employed SCSS for the styling and utilized Material UI to create a slider that filters product prices
- Add, modify, and delete user addresses and update the database asynchrounously using fetch
- CORS and Express to handle HTTP requests and responses and to prevent cross-platform resource sharing errors
Technologies used: React, JavaScript, CSS3/SCSS, Node.js, MySQL, and the Stripe API
The membership system plays a critical role in our website, allowing users to create accounts, log in, and access exclusive content. As the developer in charge of this system, I worked closely with other team members to seamlessly integrate it into the site, prioritizing security and user-friendliness.
Users have the option to register and log in to their accounts using either their email or Google accounts. To ensure security and prevent unauthorized access, I implemented email verification through emailjs, which also includes the option to reset forgotten passwords.
For added functionality, I also incorporated Firebase storage to allow users to upload and change their profile pictures. Additionally, to establish seamless communication between the server and backend data, I utilized HTTP CORS and Axios to send and receive API requests.
This is a self-guided tour app designed with React.js.
It allows users to browse, search, and plan their tours based on various categories, including attractions, foods, accommodations, culture, and nature. It provides a list view of tours, where users can filter tours by category tags.
In addition, users can favorite tours and access their favorited list at any time.
