As a passionate gamer and aspiring web developer, I’ve always wanted to build a project that combines my interests and enhances my technical skills. This led to the creation of my third project ‘7gameverse’ a game browsing application. After building two project 7auth and 7job with Next.js, I decided to build something with only React to further my understanding of Redux.
App Features:
- Game browsing: Users can search through a vast database of 871,031 games from rawg.io, one of the largest game data platforms. Users can view detailed game information including title, description, release date, rating, developer, and find stores where they can purchase the games.
- Latest Article Reading: Users can stay updated with daily game articles from gamespot.com, providing the latest news and insights from the gaming world.
Technologies Used:
- React
- Redux Toolkit
- TypeScript
- TailwindCSS
Data sources:
What I Learned and Experienced
Thanks to the generous free API resource from both rawg.io and gamespot.com, these platform provide free access to their data so I am able to build a ‘7gameverse’ web application where I learned handling state management with Redux. I learned how to use createAsyncThunk with Axios to fetch the data from rawg and gamespot APIs.
State Management with Redux
I gained a better understanding of handling asynchronous actions with Redux, specifically managing pending, fulfilled, and rejected states using the extraReducers function.
Matrix-styled Loading Effect
For loading state, I implemented matrix-styled effect, I found this on a youtube tutorial a javascript canvas by utilizing DOM manipulation within useEffect, I was able to integrate this effect seamlessly into my app
Overcoming CORS Issues
One of the significant challenges I faced was fetching articles data from GameSpot API, due to a ‘Network Error’ caused by a CORS policy restriction, my access has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
After researching similar issues on stackoverflow.com and consulting ChatGPT, I realized that I couldn’t control the API server’s CORS settings, to solve this problem, I proxied the request through my server, instead of fetching GameSport API directly from my React app I used Node server to fetch the data and then pass the data to my React app.
app.use(cors());
app.get('/', (req, res) => {
res.json({ message: 'Welcome to 7gameverse application.' });
});
app.get('/api/articles', async (req, res) => {
try {
const response = await axios.get('https://www.gamespot.com/api/articles/', {
params: {
api_key: 'GAMESPOT_API_KEY_HERE',
format: 'json',
limit: 12,
sort: 'publish_date:desc',
filter: 'categories:18',
},
});
res.json(response.data);
} catch (error) {
res.status(500).send(error.message);
}
});This workaround allowed my blog post page to render properly with latest daily game article data from GameSpot
Building ‘7gameverse’ has allowed me to apply what I’ve learned and provided experience in solving real-world problems. I hope ‘7gameverse’ will help gamers find their favorite games and keep up with the latest gaming news.
What will my next steps be? Having successfully built ‘7gameverse,’ I am eager to continue expanding my skills. My next exploration will involve delving deeper into back-end development, database management, learning server-side frameworks, and exploring MongoDB and Firebase. By focusing on these areas, I aim to become a well-rounded developer capable of handling both front-end and back-end development tasks.
To newcomers in the web development world, I highly recommend two API documentations that were essential for completing this project. If you are looking to build a project and fetch data from different sources. Check out the links below.
Thank you for taking the time to read about my React project ‘7gameverse’.