An actionable self-improvement app for spiritual souls to practice routine! Seek betterment over at Thirteen Moons.
Curious about my wireframe? Check it out on Figma!
- 52 Cards with their image, points, and activities.
- Ability to edit certain face cards for a custom challenges.
- 13 Rounds in total, Each round user has presented 4 cards, they choose one thing to do. When they do it, points are added to the board.
Clone the project and install dependencies
git clone [email protected]:andrewvallejo/thirteen-moons.git
cd thirteen-moons
npm install
npm start
- Score Board adding up the total values of the cards chosen.
- User profile that contains their cards and scores
- Backend server to host user data
- More dialog for the moon
- The intro (which was drawn in the wireframe)
Routing ins-and-outs, React hooks, implementing custom art pieces from wireframe into the project
This project spanned over seven days. I wish I had five extra days so I could've had 13 moons in total to complete this project to satisfaction. The main challenge that presented itself was myself for I am always misgauging the difficulty of a challenge. I like to code how I imagine a test mouse would methodically go through a labyrinth with multiple paths each day, trying to find the shortest way to the goal possible, even if it means risking taking the long route.
Click below to read more
Thirteen Moons was supposed to be a project to flex what we knew to do in React. I tend to be over-ambitious and miscalculated, so I chose a simple API with only GET calls that drew playing cards. I ran into trouble with all aspects of this project, mainly due to the constraint of time. I am the kind of someone who tries to find ten different solutions to one problem that would work with one. This approach led to some remarkable discoveries, such as figuring out how to add a hover element to the playing cards, which had five layers stacked upon each other—or learning how to mutate state by using React's useReducer for the first time.
I aspire to evolve my current project from everyone prior, but that gravitates in creating an 'over-engineered aspect of my projects. Unfortunately, since I'm not a super genius who codes at 200 words per minute, the lack of time led to delays in error handling and testing Cypress. I could not successfully create intercepts with stubs from my fixtures nor create any sad paths for my website since Router's redirect was invoked no matter the URL path.
Another challenge arose from how modular I made everything. Once I learned to access Match's path to render the components state without passing down Props conditionally. I directed my focus in making my components operate as isolated as they could from each other.My components inherited unpredictable behaviors, and since everything operating primarily on its own, it made troubleshooting take a lot longer. For example, having the card update the URL upon being clicked while keeping everything else in sync was challenging since it meant the cards themselves had more control of the game than App did. The effects from this decision did not bubble up until later when trying to implement error handling based on redirecting the URL whenever the user wandered astray.
These challenges always bring up a different perspective, yet the following stress could always have been alleviated by taking fewer risks. It's ironic since one of my strengths is that I am pretty good at reprioritizing, but unfortunately, my goals shift frequently. The Next attempt I want is to create issues on my project and never do anything more than what is on that ticket until I am done with all of the "need to be done" tasks. For me, I have a hard time flexing what I do know since I find the most value in showing off in my desire to explore new concepts and apply those. I need to learn to slow down and strengthen my foundation before moving on to the next exciting thing.
