Assignment on ReactJS

Assignment on ReactJS

<h1 id="assignment-on-reactjs">Assignment on ReactJS</h1>

<p>Hey! This is the first assignment in the <strong>React Native course</strong><a href="#fn:reactnativecourse" id="fnref:reactnativecourse" title="See footnote" class="footnote">1</a>. </p>

<hr>



<h2 id="description">Description</h2>

<p>You need to design a page which will be look-alike with AirBnB Listing Page <a href="#fn:airbnb" id="fnref:airbnb" title="See footnote" class="footnote">2</a> with some improvised features.. </p>

<blockquote>
  <p><strong>The Task:</strong></p>
  
  <ul>
  <li><p>There are filters for “Homes”, “Experiences”, “Restaurants”.</p></li>
  <li><p>Clicking on the filters - the listing changes.</p></li>
  <li><p>There are 4/5 sections in the page. While populating data - make sure every section and every category has enough data - so that the filtering and other operations is clearly visible.</p></li>
  <li><p>For every listing just below the image and just above the listing name there mentioned a category. </p>
  
  <ul><li>Make the category clickable and the list should be filtered based on this click (<em>just like the top filtering</em>). </li></ul></li>
  <li><p>For every listing there are favourite (<i class="icon-heart-empty"></i>) icons at top right of every listing images.</p></li>
  <li><p>You need to make sure when users click on this icons - two things happens:</p>
  
  <ul><li>the favourite icon is filled (like: <i class="icon-heart"></i>)</li>
  <li>the favourite property is shown in a separate section (just like other sections in the page - “<em>Just Booked in Miami</em>“, “<em>Popular Reservations</em>“)</li></ul></li>
  </ul>
</blockquote>



<h2 id="rules">Rules</h2>

<blockquote>
  <ul>
  <li><p>You have to make sure you reused components</p></li>
  <li><p>You have to make sure you have used flexbox</p></li>
  <li><p>For data:</p>
  
  <ul><li>You have to design the data JSON yourself. </li>
  <li>You can use any location data for AirBnB. </li>
  <li>Images can be urls from AirBnB site directly and are only for demonstration purpose. You can also reuse them.</li>
  <li>This site <a href="#fn:airbnbdata" id="fnref:airbnbdata" title="See footnote" class="footnote">3</a> can help.</li></ul></li>
  <li>You can also take help from the lecture codes and re-use them.</li>
  <li>Put the code in a github repository with public access and submit the link via email <a href="mailto:school@cefalo.com">school@cefalo.com</a> within the next class.</li>
  <li>Codes will be reviewed and marks will be informed to groups.</li>
  </ul>
</blockquote>

<div class="footnotes"><hr><ol><li id="fn:reactnativecourse"><a href="https://cefalo.atlassian.net/wiki/spaces/CS/pages/102793217/Getting+Started+with+React+Native/">React Native Course</a>  <a href="#fnref:reactnativecourse" title="Return to article" class="reversefootnote">↩</a></li><li id="fn:airbnb"><a href="https://www.airbnb.com/s/Miami--FL/all/">AirBnB Miami Listing</a> <a href="#fnref:airbnb" title="Return to article" class="reversefootnote">↩</a></li><li id="fn:airbnbdata"><a href="http://insideairbnb.com/get-the-data.html">AirBnB Sample Data</a> <a href="#fnref:airbnbdata" title="Return to article" class="reversefootnote">↩</a></li></ol></div>