Udated readme, minor polishing

This commit is contained in:
ireic
2020-01-23 19:33:56 +01:00
parent d4b4624250
commit fffb0fed4f
6 changed files with 34 additions and 4 deletions

View File

@@ -10,7 +10,28 @@
![Tech logos](https://i.ibb.co/0BgNRKC/logos.jpg)
![App screenshot](https://i.ibb.co/HDwwh6L/jira-clone-optimized.jpg)
![App screenshot](https://i.ibb.co/W3qVvCn/jira-optimized.jpg)
## What is this and who is it for 🤷‍♀️
I do web development and UX design consulting and this is a showcase product I've built in my spare time. It's a very good example of what a modern real-world React codebase looks like.
There are many public React projects out there but most of them are either way too simple or [way too complex](https://github.com/Automattic/wp-calypso). I like to think that this project contains enough complexity to offer valuable insights to React developers of all skill levels while still being relatively easy to understand.
## Features
### Client
- Proven, scalable, and easy to understand project structure
- Written in modern React, only functional components with hooks
- A variety of custom light-weight UI components such as datepicker, modal, various form elements etc
- Simple local React state management, without redux, mobx, or similar
- Custom webpack/babel setup, without create-react-app or similar
### API
- Simple, scalable, and easy to understand project structure
- Written in TypeScript and using TypeORM
## Setting up development environment 🛠

View File

@@ -112,7 +112,7 @@ const seedIssues = (project: Project): Promise<Issue[]> => {
timeSpent: 3,
reporterId: users[1].id,
project,
users: [users[0], users[1]],
users: [users[1], users[2]],
}),
createEntity(Issue, {
title:

View File

@@ -6,6 +6,7 @@ export default createGlobalStyle`
html, body, #root {
height: 100%;
min-height: 100%;
min-width: 768px;
}
body {

View File

@@ -1,13 +1,15 @@
import React from 'react';
import { CopyLinkButton } from 'shared/components';
import { Button } from 'shared/components';
import { Header, BoardName } from './Styles';
const ProjectBoardHeader = () => (
<Header>
<BoardName>Kanban board</BoardName>
<CopyLinkButton />
<a href="https://github.com/oldboyxx/jira_clone" target="_blank" rel="noreferrer noopener">
<Button icon="github">Github Repo</Button>
</a>
</Header>
);

View File

@@ -17,6 +17,9 @@ export const Sidebar = styled.div`
@media (max-width: 1100px) {
width: ${sizes.secondarySideBarWidth - 10}px;
}
@media (max-width: 999px) {
display: none;
}
`;
export const ProjectInfo = styled.div`

View File

@@ -10,4 +10,7 @@ export const ProjectPage = styled.div`
@media (max-width: 1100px) {
padding: 25px 20px 50px ${paddingLeft - 20}px;
}
@media (max-width: 999px) {
padding-left: ${paddingLeft - 20 - sizes.secondarySideBarWidth}px;
}
`;