salvadorrodriguezruvalcaba/reddit-react

Search subreddits and open or share topics

Reddit Search & Share

Features

• Search subreddits and open or share topics
  • Search as-you-type or by submitting
  • Drag-and-drop a topic to either share via email or open in a new tab
  • Flexbox throughout

Installation

git clone [email protected]:zacacollier/reddit-react.git
yarn && yarn start

Frameworks & Libraries

• React + Redux:
  • PropTypes for type-checking
  • ReactDnd for Drag-and-Drop functionality
  • Redux Thunk for async actions
  • Redux DevTools Extension for positive DX :)
• Axios for handling API requests
• Webpack and other goodies from create-react-app:
  • ESLint
  • CSS minification
  • Autoprefixer for CSS compatibility

Q & A

• "Was 3 days / 12 hours enough time?"
  • Yes, 3 days was a perfectly adequate amount of time.
• "How many hours would you estimate you spent on this project?"
  • A little over 12 hours.
• "Did you encounter any struggles while completing this? How did you overcome them?"
  • I had the most trouble implementing the Drag-and-Drop functionality, as I'd never used the ReactDnd library before. I first laid out the minimum number of components necessary to get it wired up (a basic 'DragSource' and 'DropTarget'). Fortunately, the library is designed by Dan Abramov, so the design principles were at least somewhat familiar to me. Once I'd gotten the Dnd components to successfully interact, the bigger problem became how to trigger the right Drop event. The 2 DropTargets are configured to accept the same DragSource dragType - so right out of the box, one Drop event would trigger the both DropTargets (i.e. dropping onto an 'email' DropTarget would also trigger the 'Open on Reddit' DropTarget).
  • To fix this problem, I made sure to set a "link type" prop on each of the DropTargets - mail or reddit. I actually was already doing so in order to reference the correct filename of each DropTarget's respective icon (reddit.png or mail.png). Then, in each DropTarget's drop() handler, I configured it to filter out DropEvents by type, so that each DropTarget's respective "link type" would dispatch the proper action.
• "Do you have any experience using SASS or PostCSS? If not, did you look at all? Do you think it's something that you could learn easily?"
• I have some experience using PostCSS, less so with SASS. I'm pretty familiar with debugging Webpack configurations, and setting up CSS pre-/post-processing kind of goes hand-in-hand with bundling of any kind these days.
• Before starting this project, I read through some of the PostCSS documentation to get an idea of what it would take to implement it thoroughly. I'd've liked to have done more with it, but I knew in the back of my mind that implementing ReactDnd was probably going to take up enough of my time as it is. That, and I knew that create-react-app came with some great CSS processing that would certainly be better than nothing.
• I understand the basic setup and concepts, and, as I mentioned, have used it in prior projects (my website for example), but haven't really taken a deep dive into it yet. The bits and pieces I've learned so far, I learned by poring over a codebase where it was already implemented. I'm confident that given the necessity to work in a codebase that makes heavy use of PostCSS / SASS, I'd quickly grow accustomed to it.
• "If you used a JavaScript library or framework, why did you use it for this project?"
  • The libraries and frameworks listed above are all the ones I used in this project. I chose React and Redux because for one thing, it was more or less expected of me, but mainly because it's really an incredible combination for developing on the Front End. The flexibility and modularity of both make it possible to jump through just about every hurdle you might run into as you build out your App. Better yet - if your needs exceed that of what they provide out of the box, there's a rich ecosystem of components, bindings and middlewares to help out.
  • The only library or framework I used besides those listed above is lodash. I use it in almost every front end project I work on. I have a habit of 'aliasing' common business logic operations into my project's constants folder, into a file called helperFunctions. The Searchbar's query URL, for instance, is generated by a simple function from the helpers. But, for operations that might take a little more precision, I always reach for lodash. -"Rate this project on a scale of 1 to 10, with 10 being the hardest thing you've ever done."
  • I would give this project a solid 6. It definitely wasn't the hardest thing I've ever done, but implementing ReactDnd really put my front end chops to the test. Laying out components was pretty straightforward. Styling wasn't difficult, but it did take longer than I'd've liked - I'm afraid Bootstrap really spoiled me for the year or so I used it so heavily.

Misc Notes

• The original repo I used is here. I ran into a merge conflict trying to pull my finished work into master (WIP).
• In my React components, I like to destructure my props on-the-fly, and break them on to separate lines based on their origin. Sorry if that looks weird:

const Component = ({
// mapStateToProps bindings go here
// mapDispatchToProps bindings go here
// Other props go here (i.e. ReactDnd connections)
}) => (...)

• I'm happy with how the project organization turned out. I made it a point to separate each Component of the app 'by feature' (somewhat a la ducks). Check out the components directory to get an idea.
  • Along those lines, every React component has an adjacent, similarly-named CSS file to help keep styles organized.

Where to go from here

• Refactor, use smarter CSS
• Mobile compatibility
  • Work in the ReactDnd touch backend.
  • Add a "pull to refresh" feature
• Add a custom canvas loader