My first REACTJS project taught me ALOT.

Finally got my first REACTJS(NEXTJS) project to an MVP where I can show it to the world its not perfect but it's a start. I started this project a long time ago, on the journey to completion I actually managed to finish other projects in the meantime and get gold in a hackathon, when creating I got distracted by other ideas in my head and started a new project. FINALLY, I came back to this one and finished it and squashed most of the bugs

What did I create?

I wanted to create a blockchain data site where you can combine all the important data points that matter to you with specific crypto coins or projects in one place.

The project needed to include payment, database, users etc... as much as possible to show future employees I am capable of more than a TO DO list.

Some card examples.........

Massive learning curve

So I started my site initially with Reactjs - Styled components- MongoDB this changed a lot of times in the journey

Styled components ---> TailwindCSS

I really enjoyed using styled components I managed to get a nice looking layout until I viewed it on the mobile version. I never realised how much time it would take, it was taking me forever to wrestle with all the fine CSS details and code and it was still buggy as hell. Then I found TailwindCSS and TailwindUI which massively increased my speed with pre-built templates which you still spend a large amount of time editing but not half as much anymore. It did cost a lot for the tailwind UI package but I've made that money back since from making websites for my friend's electrical businesses and HVAC business they all wanted sites and it was easy enough to make them.

MONGODB --->Firebase--->Supabase

I started with mongodb it was easy enough to set up but I had issues with MongoDB and Firebase with storing my users on the DB and the best ways to handle it ect. I will admit at this stage I was giving up on tech too easily and wasting a lot of time jumping from tech to tech when I should have just concentrated more on the problems. I was using nextAuth with an adapter for MongoDB but was constantly getting errors as it was a new version and the documentation or support was not great at the time.

So eventually I found Supabase and I loved the way it handled user Auth and it automatically created a users table for me. Was it a shortcut from the latter options? Maybe but it saved me a ton of time and their documentation is great and they have a lot of other awesome features.AND it was FREE.

In the future I will build an app with MongoDB as a lot of jobs ask for that sort of experience.

REACT REDUX SILLY MISTAKE

I decided to use react-redux as my app has a lot of state which needed to be accessed from any page so I thought redux was the best option being a naive noobie and seeing great things about it on youtube I thought I needed it. I was wrong again redux was working but it took a lot of boilerplate code to get working, just when I was done I logged off to return the next day and realize all my state was gone, I had no idea at the time that I needed to save it somewhere or use redux persist, looking back now I feel silly but that's part of learning. In the end I switched back to react context but I learned a lot I guess, the reason being I had my state management for all my users and cards in one context and it worked well for adding it to my DB. I still have redux on my site as I use RTQ for fetching data.

Stripe ---> Paddle

This one was annoying I implemented stripe as a payment system it worked great BUT because my site has crypto data on it stripe decided it didn't meet their terms and conditions and blocked me.

So I switched to paddle which they accepted me but I'm glad it happened as I set up paddle in half the time it took stripe and they have a really good webhook simulator.

These were just some of the headaches I created for myself. but I'm glad they happened as I learned a lot of different technologies and different methods of creating the same app.

was it the most efficient way HELL NO! but my projects following this app didn't include all these mistakes.

www.blockpage.app

In the app I created I still have a lot to do but I think it's a great 1st project for a portfolio and it's only up from here.

I WOULD LOVE TO HEAR FEEDBACK I KNOW ITS NOT PERFECT BUT IM SLOWLY CHIPPING AWAY AT IT

Things I'm going to improve

• Make the UI cleaner looking
• Sort color contrast out and the color theme
• Improve page performance
• Add more interesting blockchain data points. currently implementing an NFT minter.
• Carry on squashing bugs