{"componentChunkName":"component---src-templates-blog-post-jsx","path":"/blogs/reactNativeProjects-Part1","result":{"data":{"blog":{"frontmatter":{"title":"REACT NATIVE PROJECTS - PART 1","thumbnail":"blog65","date":"May 21, 2021","dsaCppCodeFile":null},"excerpt":"<div class=\"my-2 p-2\">\n              <div class=\"m-2\">\n                <p>\n                  You must know the basics of\n                  <a href=\"/blogs/learnJavascript\">JavaScript</a>,\n                  <a href=\"/blogs/learnReactJS\">React</a> and\n                  <a href=\"/blogs/learnReactNative-Part1\">React Native</a>\n                  before diving into these Projects\n                </p>\n                <p class=\"lead\">\n                  <strong\n                    >Check these projects to improve your React Native\n                    skills.</strong\n                  >\n                </p>\n              </div>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>1. Food Delivery App UI</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/diUDjNwZ8Lg\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>2. News App</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLQWFhX-gwJbl5sIXMZvdvGYCcZbUevE88\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>3. Todo List</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLYBvEAka-q1hJuwRPYQPlEBBRm7_qGw_2\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>4. Travel App UI</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLYBvEAka-q1hhaSQZQF1-ERbMv95ACPqS\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>5. Whether App</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/NgDaPmxewcg\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>6. Instagram Clone</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/1hPgQWbWmEk\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>7. Custom Bottom Tabs & Drawer</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLQWFhX-gwJbmmqcP-9zMXBaxQbGKfIJY2\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>8. Social App using Firebase</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLQWFhX-gwJbmrCwksjn77tdl36dIWPFAt\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>9. Authentication using NodeJS</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLB97yPrFwo5hZGcsD7Ac9rNPidDWjp79A\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>10. Tesla App UI</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/iQ_0Fd_N3Mk\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n            </div>\n            <div class=\"my-2 p-2 text-muted\">\n              <p>\n                <strong\n                  >PS: The videos that mentioned as \"UI\" are just the UI designs\n                  without inner functioning of the app. So by watching them, you\n                  can learn UI designing and later add functioning on your\n                  own.</strong\n                >\n              </p>\n              <p>\n                Keep working on projects until you get better understanding of\n                concepts!!!\n              </p>\n            </div>\n            <div class=\"my-2 p-2\">\n                <strong>Similar posts:</strong>\n                <a href=\"/blogs/reactNativeProjects-Part2\"\n                >Projects - Part 2</a\n                > \n            </div>\n","html":"<div class=\"my-2 p-2\">\n              <div class=\"m-2\">\n                <p>\n                  You must know the basics of\n                  <a href=\"/blogs/learnJavascript\">JavaScript</a>,\n                  <a href=\"/blogs/learnReactJS\">React</a> and\n                  <a href=\"/blogs/learnReactNative-Part1\">React Native</a>\n                  before diving into these Projects\n                </p>\n                <p class=\"lead\">\n                  <strong\n                    >Check these projects to improve your React Native\n                    skills.</strong\n                  >\n                </p>\n              </div>\n            </div>\n            <div class=\"row my-2 p-2\">\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>1. Food Delivery App UI</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/diUDjNwZ8Lg\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>2. News App</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLQWFhX-gwJbl5sIXMZvdvGYCcZbUevE88\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>3. Todo List</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLYBvEAka-q1hJuwRPYQPlEBBRm7_qGw_2\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>4. Travel App UI</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLYBvEAka-q1hhaSQZQF1-ERbMv95ACPqS\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>5. Whether App</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/NgDaPmxewcg\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>6. Instagram Clone</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/1hPgQWbWmEk\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>7. Custom Bottom Tabs & Drawer</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLQWFhX-gwJbmmqcP-9zMXBaxQbGKfIJY2\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>8. Social App using Firebase</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLQWFhX-gwJbmrCwksjn77tdl36dIWPFAt\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>9. Authentication using NodeJS</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/videoseries?list=PLB97yPrFwo5hZGcsD7Ac9rNPidDWjp79A\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n              <div class=\"col-md-5 mx-auto my-3\">\n                <h4>10. Tesla App UI</h4>\n                <iframe\n                  width=\"100%\"\n                  height=\"220\"\n                  src=\"https://www.youtube.com/embed/iQ_0Fd_N3Mk\"\n                  frameborder=\"0\"\n                  allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n                  allowfullscreen\n                  title=\"YouTube Video Player\"\n                ></iframe>\n              </div>\n            </div>\n            <div class=\"my-2 p-2 text-muted\">\n              <p>\n                <strong\n                  >PS: The videos that mentioned as \"UI\" are just the UI designs\n                  without inner functioning of the app. So by watching them, you\n                  can learn UI designing and later add functioning on your\n                  own.</strong\n                >\n              </p>\n              <p>\n                Keep working on projects until you get better understanding of\n                concepts!!!\n              </p>\n            </div>\n            <div class=\"my-2 p-2\">\n                <strong>Similar posts:</strong>\n                <a href=\"/blogs/reactNativeProjects-Part2\"\n                >Projects - Part 2</a\n                > \n            </div>"},"thumbnail":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M40%202l-7%206c-6%204-7%205-7%2014-2%2013-9%2024-20%2028l-5%202-1%2086v87h42l3-4%204-4v-1c-1-1-1-1%202-1l12%207%202%203h318l-7-14-7-17%201-1c-1-1%205-7%2010-8h20v20l1-65c0-90%200-100-3-98l-9%201c-10%200-16-2-23-9-9-8-11-8-19-5-10%205-22%201-28-8-2-4-2-5-2-13V0H42l-2%202m12%2032c-3%202-6%207-6%2012%200%204%203%204%203%200l3-6c4-6%205-6%2038-6%2020%200%2030%200%2029-1l-32-1c-30%200-32%200-35%202m9%202c-6%202-10%207-10%2011v3l38-1h37v-5c-1-8-1-8-34-9l-31%201m-15%2076c0%2052%200%2059%202%2059l1-59-1-59c-2%200-2%207-2%2059m5-57v116h75V53H51v2m171%2038h-5v8c-1%209-1%209%206%208%204%200%205-1%205-2%200-2-1-2-3-2-5%200-5-2-1-2l3-2-3-2c-4%200-4-2%201-2%203%200%203%200%203-2v-3l-6%201m25%202c-6%206-2%2017%204%2014%203-1%205-5%204-6-1%200-2%200-3%202l-3%201c-1-2%200-10%202-10l1%202c-1%202-1%202%201%202%204%200%204-4%201-6-3-3-4-2-7%201m72-1l-1%209c0%206%200%207%202%207%201%200%202-1%203-8v-7l2%207c1%206%202%208%204%208s2-1%203-4l2-8c2-4%202-4%200-5s-2-1-3%203-3%205-3%201c0-3-1-4-5-4-3-1-4-1-4%201m23-1h-5v8c-1%209-1%209%206%208%204%200%205-1%205-2%200-2-1-2-3-2-5%200-5-2-1-2%204-1%204-4%200-4l-3-1%204-1%204-2c1-2-1-3-7-2m-138%208c-1%207%200%2010%202%209l1-3c0-3%202-3%203%200s5%203%204-1v-8l1-4-6-1h-5v8m28%200l-2%208h4c1-3%204-3%204-1%200%201%201%202%203%202s2%200%201-9c-2-7-3-8-5-8s-3%201-5%208m46-3c-2%209-1%2012%201%2012l3-2a442%20442%200%20001-2c2%204%205%205%205%203l1-9c1-7%200-7-2-7s-2%201-2%203v3l-1-3c-2-5-6-4-6%202m16-1l-3%2012c1%202%204%201%204%200%200-3%204-3%204-1%201%203%205%203%205%200l-3-13c0-4-5-3-7%202m11-1c0%202%200%202%202%201%202%200%202%200%202%206s0%207%202%207c1%200%202-1%202-7%200-5%200-6%202-6l2-2c0-2-1-2-6-2-6%200-6%200-6%203m-91%2033c0%205%200%206%202%206l1-2c0-2%201-2%204-2%205%200%207-1%207-4s-4-5-9-5h-5v7m16%200c0%205%200%206%202%206l1-2%202-2c3%200%205%201%205%203l3%201h3l-3-2c-3-3-3-3-1-4%205-3%201-7-8-7h-4v7m19-5c-7%205%200%2013%208%2011%206-1%208-8%204-11-2-2-9-2-12%200m78-1c-2%201-3%205-1%206l6%201c6%201%207%203%201%203l-6-1h-2c0%204%2014%204%2015%201%200-3-3-5-6-5-5%200-7-2-5-3%201-1%205-1%209%201%203%200%202-2-1-3h-10M51%20180c0%206%202%2010%207%2012%204%202%207%202%2032%202l29-1c4-1%206-5%206-12l1-5-38-1H51v5'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7699115044247788,"src":"/static/33a738a4a15e282cfc4035479db8c54f/ee604/blog65.png","srcSet":"/static/33a738a4a15e282cfc4035479db8c54f/69585/blog65.png 200w,\n/static/33a738a4a15e282cfc4035479db8c54f/497c6/blog65.png 400w,\n/static/33a738a4a15e282cfc4035479db8c54f/ee604/blog65.png 800w,\n/static/33a738a4a15e282cfc4035479db8c54f/f3583/blog65.png 1200w,\n/static/33a738a4a15e282cfc4035479db8c54f/e4d72/blog65.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"pageContext":{"blog":"reactNativeProjects-Part1","thumbnail":"thumbnails/blog65.png"}},"staticQueryHashes":["2987289216","63159454"]}