4 min read

PuzzleNomic

PuzzleNomic

yes it was crossword puzzle . My first freelance project coz I felt so bored doing the same thing everyday . My responsibility for this project was very huge . Im a " fullstack " and at the same time also indie developer ( doing all alone from basic design with figma , frontend , backend , api , deploying blablabla ) . Yes that "fullstack " , which become the popular nowadays , but now I will share to you guys what is the real thing behind this fullstack conspiracy . Stay tune with me .

Splash Screen and logo design

Im using figma for logo and splash screen design .

Icon and splash screen

‌            ‌‌

Challenges

Matrix , row and columns , intersection . This is kind of math stuff I need to deal and study. Another challenges is dumped back the saved data which called from API using axios. Below this , I will share how solve that obstacles and challenges .

Challenge 1 : Drawing saved me

As we know , I need to convert the puzzlenomic from the books to the apps . After I've made some thinking and observation about how suppose I do to get the precise value of column and row , then finally I got the idea after I saw my brother mathematics exercise books which had grid on it . So that's a haa moment enough for me to proceed to the next step .

yes , this traditional way become my lifesaver as I need to draw row and columns on the books . Of course it was not easy as you thought coz you need to find the column and row " 0 " . Below , I will show how actually it was done .

row and columns

‌                                                                      

After got the row and columns , then the value will be used inside the puzzle object as shown below .

object

Challenge 2 : axios response data empty taught me a big lesson

handling API response is not easy as we thought . This problem arises when I need to fetch back the saved data from database through API using axios . Its not about using try and catch statement here , eventhough you are using it , if the returned response from API is empty or null , it does not solve the problems . I took about 1 day and half to solve this 😥😥😥 .

As you can see , after the response fetched , the code will be executed through if else statements . If the response matched with the puzzle clue ( correct answers) then the response (answers) will be filled to the puzzle . But for another cases , if the response is empty , it will be lead to the error . So , how I solved this ?

array from API

As you can see , on the answer part of the array , the default value "NULL" will be assigned to the answer array value . Yes , this definitely solved my problems as the response returned that "default value" even there is no saved answer .

Apps Screens - some of it

                                                                                             

Conclusion

The project still running and in the phase of user testing . Making and develop an application is not easy as we thought especially you are indie developer . For this project I dont make much money from it . I just get paid enough for the resources , development cost and for buy my coffee . As a person love the nation , I do this project to help society especially students and lecturers for better learning environment especially for this economics subject . Final words from me ,

First, solve the problem. Then, write the code.” – John Johnson