Creative Crypto - First Commit & Initial Styling

in #utopian-io6 years ago (edited)

180226_interface-beta.670b616772604092a512e43af2fde529.png

Image Source

This is the first React project I’ve ever worked on, and I’m excited to be a part of it. I’m working as the developer for the new project by @sndbox called The Creative Crypto. Here is the announcement post that explains the project:

The Creative Crypto will be an online journal (thecreativecrypto.com) and bi-yearly publication of blockchain’s impact on the creative world. The journal will strive to present the best new projects, people, ideas, and community developments in order to empower the next revolution of crypto-powered production.

This first iteration of the site will be made up completely of a React/Redux/Router front end, with no back end. It will take the posts from the @creativecrypto account and format them in a more online-magazine-like format (see the image above). The design was done by the @sndbox team.

Here are some links for The Creative Crypto if you’d like to take a look: Twitter / Facebook / website (currently a landing page with newsletter sign up form).

Current Status


When the guys at @sndbox first talked to me about putting this site together, I took a day to make a rough outline of what the site would be like to make sure it was something I was capable of. Here is what the initial development looked like:

Screen Shot 2018-02-07 at 12.52.51 PM.f9b563fd2cf04c64be3716eaa25ed087.png

Screen Shot 2018-02-07 at 2.08.54 PM.3416f141bce841daac0e475381f84fe6.png

Screen Shot 2018-02-07 at 3.45.00 PM.3af467e195f34aeb93c5b7ca93c39fec.png

Screen Shot 2018-02-07 at 4.57.16 PM.e577650d3eff4ba1a963af077a10708b.png

I built this first iteration just with HTML/CSS/JavaScript/jQuery, and realized that some of the things I’d like to do would require React, which is something I hadn’t learned yet. So I took a bit of a break from the project to learn React, and just started coding up the React version at the end of last week.

As of right now, the Github repo contains the main React components that were ported over from my first iteration in jQuery. The main API call is working and populating the page with some of the post summary tiles, but I need to jump back in and fix a bunch of the formatting issues.

I also started to implement React Router, to allow each post to have its own permalink on the site.

Next


Over the next few days I’d like to get a fully functioning draft of the site done, at which point I’ll just need to refine the styling and fix any bugs. Here are some of the main tasks:

  • add large tile to render of home page
  • add twitter feed in sidebar
  • find and implement price tickers for SBD and STEEM
  • enable routes to refine home page by tag
  • add API call for individual posts if visited directly by URL
  • add media queries for responsive design
  • refine styling to match the design image

Feedback


I really want to do a good job creating this site, so please let me know if you have any suggestions to improve my code. Feel free to leave a comment on this post, or on the Github repo. This is the first time I’m building a more complete/professional project for someone else, so I’m excited to be working on it!

Thanks for reading! 🙂



Posted on Utopian.io - Rewarding Open Source Contributors

Sort:  

Hey @jeffbernst I am @utopian-io. I have just upvoted you!

Achievements

  • You have less than 500 followers. Just gave you a gift to help you succeed!
  • Seems like you contribute quite often. AMAZING!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

mooncryption-utopian-witness-gif

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

so critical designs👏

Yeah they did a great job!

good job....... carry on brother keep it up☺☺

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

Thank you! 🙂

I'VE READ THE WHOLE POST AND BRO YOU ARE MAKING WELL EFFORT KEEP IT UP

It's really looking great! Feel free to hit me up if you have any questions regarding react/redux - I've been working with it full time for the past year. Also, given that it's an opensource project it would be helpful for others if you used branches and made pull requests instead of pushing directly to master (would make code review MUCH easier 🤪 )

Awesome, thank you so much! I will definitely let you know if I have any questions.

Actually I just realized last night that I should be using branches. 😬 I'm working on a feature right now that's still on master, but after that I'll use branches. Thanks for the tip!

This looks like an ace project to be part of. Well done on jumping straight into it Jeff. Looks like you're getting the hang of the react stuff, totally need to do some more myself tbh, it's been a long time.

@sndbox seems like a really great community and their designs are always pretty rad. 💯

Thanks Sam! Yeah, I'm really happy to be a part of @sndbox and I'm hoping some of their design sense rubs off on me. 😀

Jeff, You are doing an amazing job to create such a project for @sndbox and Glad to hear that you are using react for the front-end. The initial phase looks good to me.

Looking forward for more updates about your project.

Awesome, thanks @mslifesteem! Yeah so far React hasn't been too bad -- I'm hoping I don't run into any big problems as I get this draft fully functional. 😀

Thanks for reading!

You're welcome Jeff.

Don't worry Jeff. You will not face any problem, Just stick to it till the end. Everything will be running okay. I never used react myself yet, but I used vue.js & angular a bit. I am hoping to start learning react soon!

Good luck.