At the end of my software engineering immersive at General Assembly, I wanted to track my progress toward the goals I had set for myself. I was particularly interested in learning to anticipate how code would render on the screen in formats that can be problematic. Baseball standings, stats, and infographics fit the bill perfectly, and gave me a great opportunity to demonstrate some of the concepts we learned for MERN stack applications.
The resulting MLB Info app presents real-time baseball information to users in a familiar but friendly way, using MLB's publicly available API and an express/MongoDB backend to serve user comments.
I used Figma to wireframe the project, along with some hand sketches. Team logos are MLB's official logos, while the base and outs indicator in the ticker were drawn by me in GiMP.
- Fork and clone the repo
- in the cloned directory, run npm i to install dependencies
- From separate terminals, run 'npm run frontend' and 'npm run backend'
- Navigate to localhost:XXXX , where 'XXXX' is the port indicated in the frontend terminal
- Users cannot see comments without being logged in. There is a sign-up link in the nav bar
- React.js
- Tailwind CSS
- Javascript
- Express.js
- MongoDB
- Mongoose ODM
- Node.js
Future development on the site includes the ability to set favorite teams and players, stat leaders, and notifications.