add rn-chat

Author: nemanjam

src/components/ProjectCard.astro

@@ -4,6 +4,7 @@ import { Image } from 'astro:assets';
 
 import { getPublishedOrUpdatedDate } from '@/modules/common';
 import Link from '@/components/Link.astro';
+import { DRAFT_TEXT } from '@/constants/data';
 import { IMAGE_SIZES } from '@/constants/image';
 import { ROUTES } from '@/constants/routes';
 import { formatDate, formatDateIso } from '@/utils/datetime';
@@ -17,7 +18,7 @@ export interface Props {
 const { project } = Astro.props;
 
 const { slug, data } = project;
-const { title, description, heroImage, heroAlt, publishDate, updatedDate } = data;
+const { title, description, heroImage, heroAlt, publishDate, updatedDate, draft } = data;
 
 const { lastAccessDate, isUpdatedDate } = getPublishedOrUpdatedDate({
   publishDate,
@@ -36,6 +37,7 @@ const { lastAccessDate, isUpdatedDate } = getPublishedOrUpdatedDate({
   <h4 class="b-h4 break-words line-clamp-2 mb-0">
     <Link href={`${ROUTES.PROJECTS}${slug}`} variant="heading">
       {title}
+      {draft && <sup class="text-sm text-red-500 ml-1">{DRAFT_TEXT}</sup>}
     </Link>
   </h4>
   {description && <p class="text-sm text-captions mb-2">{description}</p>}

src/content/project/2014/02-13-example-project-1/index.mdx

@@ -4,6 +4,7 @@ description: Description of the first project
 heroImage: '../../../../content/project/2014/02-13-example-project-1/_images/flowers-store.jpg'
 heroAlt: Flowers store
 publishDate: 2014-02-13
+draft: true
 ---
 
 import { Image } from 'astro:assets';

src/content/project/2014/03-15-example-project-2/index.mdx

@@ -5,6 +5,7 @@ heroImage: '../../../../content/project/2014/03-15-example-project-2/_images/cyc
 heroAlt: This is bicycle
 publishDate: 2014-03-15
 updatedDate: 2014-04-21
+draft: true
 ---
 
 import { Image } from 'astro:assets';

src/content/project/2014/05-16-example-project-3/index.mdx

@@ -3,6 +3,7 @@ title: This is the third project
 description: Description of the third project
 heroImage: '../../../../content/project/2014/05-16-example-project-3/_images/morning1.jpg'
 publishDate: 2014-05-16
+draft: true
 ---
 
 import { Image } from 'astro:assets';

src/content/project/2019/.gitkeep

@@ -19,7 +19,7 @@ import ReduxEcommerceImage from '../../../../content/project/2019/09-29-redux-ec
 
 E-commerce website with React and Redux.
 
-## Goal
+## Goals
 
 Build a basic e-commerce website. 
 

src/content/project/2019/09-29-redux-ecommerce/index.mdx

@@ -0,0 +1,49 @@
+---
+title: RN chat
+description: React Native chat app.
+heroImage: '../../../../content/project/2019/10-23-rn-chat/_images/rn-chat.png'
+heroAlt: React Native chat screens
+publishDate: 2019-10-23
+---
+
+import { Image } from 'astro:assets';
+import Link from '../../../../components/Link.astro';
+import { IMAGE_SIZES } from '../../../../constants/image';
+import RnChatImage from '../../../../content/project/2019/10-23-rn-chat/_images/rn-chat.png';
+
+# RN chat
+
+<Image {...IMAGE_SIZES.FIXED.MDX_LG} src={RnChatImage} class="shadow-lg shadow-base-300" alt="React Native chat screens" />
+
+## Overview
+
+React Native chat app.
+
+## Goals
+
+Learn React Native by building a basic chat app with users and groups.
+
+## Tech stack
+
+- React Native, Apollo GraphQL, NativeBase
+- Sequelize, PostgreSQL
+
+## Features
+
+- Auth, profile
+- Users with friends relations, public and private groups
+- Real time updates with refetching and subscriptions
+
+## Implementation details
+
+You can find more implementation details in the <Link href="https://github.com/nemanjam/rn-chat" variant="markdown" target="_blank" title="README.md">README.md</Link> file on Github.
+
+## Lessons learned 
+
+- Get practical experience with React Native.
+
+## Links
+
+- **Repository:** <Link href="https://github.com/nemanjam/rn-chat" variant="markdown" target="_blank" title="React Native chat app" />
+
+

src/content/project/2019/10-23-rn-chat/_images/rn-chat.png

@@ -19,7 +19,7 @@ import AudioTwitterImage from '../../../../content/project/2020/02-16-audio-twit
 
 Twitter clone with audio messages.
 
-## Goal
+## Goals
 
 Get practical experience with Apollo GraphQL. Work with audio.
 

src/content/project/2019/10-23-rn-chat/index.mdx

@@ -19,7 +19,7 @@ import MernBoilerplateImage from '../../../../content/project/2020/04-12-mern-bo
 
 Full stack boilerplate with React, Redux, Express and MongoDB.
 
-## Goal
+## Goals
 
 Get practical experience with Redux and Express with Mongoose.