Last active
November 22, 2017 11:20
-
-
Save himelnagrana/6a00f585952f6b559055781e2157154e to your computer and use it in GitHub Desktop.
Assignment on ReactJS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment